<p class="single">这是单行文本1这是单行文本2这是单行文本3</p>
<p class="multi">
CSS目前最新版本为CSS5,是能够真正做到网页表现与内容分离的一种样式difficulty语言。
相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,
</p>
文本溢出的css:
p{
width: 150px;
border: 1px solid red;
}
单行文本溢出:
.single
{
overflow: hidden;
white-space: nowrap;
/* white-space 属性设置如何处理元素内的空白。
white-space: nowrap 文本不会换行,只写在一行,如果没有overflow: hidden
则会超出容器的宽度继续显示.*/
text-overflow: ellipsis;
/*text-overflow 属性规定当文本溢出包含元素时的显示样式
text-overflow: ellipsis 溢出时,使用省略号表示
text-overflow: clip 溢出时直接截断*/
}
多行文本溢出:
.multi
{
display:-webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break:break-all;
/*规定非中日韩文本的换行,word-break:break-all 允许在单词内换行
word-break:keep-all 只能在半角落空格或连字符处换行*/
-webkit-box-orient: vertical;
-webkit-line-clamp:4; /*只显示4行*/
}