在css那里添加这个代码,height设置固定高度,overflow设置超出部分隐藏,如果有需要的话可以把width的值也设置上~首先你容纳文字的容器要设置固定的宽高，然后加上以下属性
white-space:
nowrap;
word-break:
keep-all;
text-overflow:
ellipsis;
第一行的代码，是不允许文字换行
第二行的代码，是不允许把单词拆开
第三行的代码，就是文本超出容器，以省略号显示
望采纳！
text-overflow {
display:block;/内联对象需加/
width:31em;
word-break:keep-all;/ 不换行 /
white-space:nowrap;/ 不换行 /
overflow:hidden;/ 内容超出宽度时隐藏超出部分的内容 /
text-overflow:ellipsis;/ 当对象内文本溢出时显示省略标记() ；需与overflow:hidden;一起使用。/
}
扩展资料：
上面是不带省略号，反之显示省略号
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
{
margin: 0px;
padding: 0px;
}
#div1 {
width: 300px;
height: 300px;
background: red;
}
pText {
display: block;
height: 30px;
width: 250px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
aText {
width: 100px;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="div1">
<span>
<a>空白会被浏览器保留。其行为方式类似 HTML 中的标签。</a>
</span>
</div>
</body>
</html>
多行文本可以使用如下样式:
intwoline {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）