标签：省略 这是 height 一些 white 文本 溢出 255
1.单行文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
border: 1px solid black;
line-height: 20px;
width: 200px;
height: 20px;
white-space: nowrap; /*设置该属性使文本在一行内显示，不自动换行*/
}
</style>
</head>
<body>
<p>这是一些文本这是一些文本这是一些文本这是一些文本</p>
</body>
</html>
效果如下：
解决方法
p{
border: 1px solid black;
line-height: 20px;
width: 200px;
height: 20px;
white-space: nowrap;
overflow: hidden; /*文本溢出时隐藏超出的内容*/
text-overflow: ellipsis; /*文本溢出时显示省略号来替代被修剪的文本*/
}
效果如下：
2.多行文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
border: 1px solid black ;
line-height: 20px; /*行高可以控制容器内可容纳的文本行数*/
height: 40px;
}
</style>
</head>
<body>
<p class="demo">
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p>
</body>
</html>
效果如下：
方法1：使用定位元素
使用伪元素::after为<p>元素末尾添加一个省略号，并将该省略号声明为绝对定位元素，始终位于容器的右下角。
p {
border: 1px solid black ;
position: relative; /*不要忘了将容器声明为定位元素，使其成为省略号的容纳块*/
line-height: 20px;
height: 40px;
overflow: hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
/* 为了展示效果更好 */
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
效果如下：
缺点：
- 即使文本没有溢出了，省略号也始终存在；
方法2：使用-webkit-line-clamp属性
p {
border: 1px solid black ;
height: 40px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
优点：
- 文本溢出是显示省略号，没溢出时不显示；
缺点：
- 兼容性差，只能在webkit内核的浏览器中使用，多用于移动端页面；
标签：省略,这是,height,一些,white,文本,溢出,255 来源： https://www.cnblogs.com/evil-shark/p/16459226.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。