[微信小程序] css 解决纯数字或字母不自动换行的问题、控制文字行数

效果

css 代码

word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

解释

word-break: break-all;

作用：这个属性允许在单词内部进行换行，即使单词很长也不会溢出容器，而是会在必要的地方打断单词以适应容器宽度。
示例场景：当你有一个固定宽度的容器，而其中的文本可能包含非常长的单词或URL时，这个属性可以防止文本溢出容器边界。

display: -webkit-box;

作用：这个属性是一个非标准的Webkit特定属性，它使得元素使用弹性盒模型（Flexbox的前身）。这允许使用-webkit-line-clamp和-webkit-box-orient属性。
示例场景：在需要使用Webkit特有的多行文本截断功能时使用。

-webkit-line-clamp: 2;

作用：这个非标准的Webkit属性限制了元素中显示的行数。例如，设置为2意味着元素中的文本将只显示前两行，其余部分将被裁剪。
示例场景：用于实现多行文本截断，特别是在Webkit浏览器中。

-webkit-box-orient: vertical;

作用：这个非标准的Webkit属性定义了弹性盒子内子元素的排列方向。vertical值意味着子元素将垂直堆叠。
示例场景：与-webkit-line-clamp一起使用，确保文本按垂直方向截断。