博客

CSS–HTML文字超出显示省略号+指定换行

  • Post author:
  • Post category:其他


1、指定俩行 

 .break {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    line-height: 30px;
    letter-spacing: 2px;
  }

2、一行 

.break {
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}

white-space属性

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 < pre >标签
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 < br /> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

word-break 属性

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。


版权声明：本文为weixin_47434590原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。