首页 > 代码库 > 文本溢出用省略号代替
文本溢出用省略号代替
<p class="title">A20 Banana Pi Development Board Module - Deep Blue</p>
/*单行文本*/
.title{
width: 150px;
height: 25px;
line-height: 25px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;/*规定当文本溢出包含元素时发生的事情,clip :不显示省略标记(...),而是简单的裁切*/
}
/*多行文本*/
.title{
width:150px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/*文本加省略号*/
.title{
width:300px;
line-height:25px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/*
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。
*/
文本溢出用省略号代替
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。