文本溢出省略号

单行文本省略号显示

• 1、容器宽度：width：value；（px、%，都可以）
• 2、强制文本在一行内显示:white-space：nowrap;
• 3、溢出内容为隐藏：overflow：hidden；
• 4、溢出文本显示省略号： text-overflow：ellipsis;

多行文本省略号显示

• width: 400px;
• display: -webkit-box;
• -webkit-box-orient: vertical;
• -webkit-line-clamp: 4;
• overflow: hidden;

补充

• 容器溢出属性 overflow
  • visible:默认值，内容不会被修剪，会呈现在元素框之外；
  • hidden：内容会被修剪，并且多余内容是不可见的；
  • scroll：内容会被修剪，但是元素会显示滚动条，以便查看其余的内容;
  • auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
  • inherit：规定应该从父元素继承overflow属性的值。
• 空余空间属性 white-space
  • normal：默认值，多余空白会被浏览器忽略只保留一个；
  • pre：空白（空格、Tab）会被浏览器保留且文本不换行，手动添加回车时会换行。
  • pre-wrap：保留空白符（空格、回车、Tab）序列，但是正常的进行换行；
  • pre-line:合并空白符（空格、Tab）序列，但是保留换行符（回车）；
  • nowrap:文本不会换行，文本会在同一行上继续，直到遇到标签为止，合并空白符（空格、Tab、回车）序列;
• 单行文本省略号属性 text-overflow
  • 单独使用无效（必须事单行文本）
  • clip：不显示省略号（...），而是简单的裁切;
  • ellipsis：当元素内文本溢出时，显示省略标记；