文本相关属性

1.text-overflow 属性: 当文本框无法容纳文本的长度时显示超出部分的方式设置

   clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉(默认)
   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; 

原文地址:https://www.cnblogs.com/prospective-zkq/p/9833692.html