文本溢出用省略号代替

Posted 2020-09-01

<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 属性的值。
*/