1.text-overflow 属性: 当文本框无法容纳文本的长度时显示超出部分的方式设置
clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉(默认)
ellipsis: 当对象内文本溢出时显示省略标记(...),使用ellipsis的时候,必须同时配合overflow:hidden; white-space:nowrap;300px;这三个样式共同使用才会有效果
ellipsis: 当对象内文本溢出时显示省略标记(...),使用ellipsis的时候,必须同时配合overflow:hidden; white-space:nowrap;300px;这三个样式共同使用才会有效果
2.white-space 属性:
white-space:nowrap; 规定段落中的文本不会换行,文本会在同一行上继续,直到遇到 <br> 标签为止。
3.word-wrap属性:
属性值break-word; 和break-all; 的区别如下:
两者都能使容器内的文本内容自动换行, break-word是指若行未的英文单词或url过长,则在词内换行, break-all则是若行未的英文单词或url过长,会将该单词放到下一行,而不会把单词截断
4.text-decoration 属性
underline 定义文本下的一条线;inherit 规定应该从父元素继承 text-decoration 属性的值 ;
应用:
1.超出单行文本显示省略号:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
2.超出两行文本显示省略号:
overflow:hidden;
display:-webkit-box;
white-space:normal;
text-overflow:ellipsis;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;