在HTML开发中由于文本过多使得生成#text节点,想要换行却又不知如何下手者入内

环境

在HTML开发中由于文本过多使得生成#text节点,想要换行却又不知如何下手者入内_第1张图片
由于文本过多,变成了文本节本。难受的点在于它不换行。
我是希望他能最多两行显示,在末尾上添加省略号的。

解决方案

最终在同事的提示下,我发现了是white-space的默认值的问题

white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
默认值: normal
继承性: yes
版本: CSS1
JavaScript 语法: object.style.whiteSpace="pre"

white-space: normal

合并空白符,并且将元素中的换行符(回车符)也转化为空格

重点

就是因为他把换行符变成空格了,所以没法换行

所以我们要修改white-space的值
笔者这种情况下,使用的是 white-space: pre-wrap

代码

在HTML开发中由于文本过多使得生成#text节点,想要换行却又不知如何下手者入内_第2张图片

效果图

在HTML开发中由于文本过多使得生成#text节点,想要换行却又不知如何下手者入内_第3张图片

你可能感兴趣的:(CSS)