html – css自动换行包裹整个单词而不破坏它们？

发布时间：2020-12-14 21:24:08 所属栏目：资源来源：网络整理

导读：我需要将长文本放入约300像素的宽度。我正在使用这个CSS： div { width: 300px; color:white; word-wrap:break-word; } 我的问题是word-wrap：break-word;。它正在破坏单词中间的单词。但我需要的是让文字保持原样，并使文件足够聪明，在适当的时候打破界限

我需要将长文本放入约300像素的宽度。我正在使用这个CSS：

div {      
      width: 300px;
      color:white;
      word-wrap:break-word;
      }

我的问题是word-wrap：break-word;。它正在破坏单词中间的单词。但我需要的是让文字保持原样，并使文件足够聪明，在适当的时候打破界限，并保持文字本身完好无损。

那可能吗？我尝试了自动换行的所有选项，但没有任何作用。要么段落没有破坏，文字不在屏幕上，或者单词中断和几个字母在一行中，而其他字母在下一行中。

编辑：添加我的代码以形成一个具体的例子。我的整个风格元素：

<style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular; min-height: 12.0px}

div {
    width: 300px;
    color:white;
    font-size:10px;
    word-wrap:break-word;
}

pre {white-space:break;}

</style>

然后在body元素中：

<body bgcolor="#1fa0e2">
<p class="p1">
<div>
<bdo dir="rtl">
<pre>
    ???? 3 ????? ????? ????? ?????????? ??? ???? ????? ??????? ?????? ?–2.5 ?????? ???,?????? ?? ??? ????? ?–2.195 ?????? ???? - ??? ?? 12% ??? ????? ?????? ????? ??????. ????????,???? 4 ????? ????? ???? ???? ????? ?????? ?–1.6 ?????? ??? ?????? ?–40% ???? - 950 ??? ??? ????.

</pre>
</div>
</bdo>
<span class="Apple-converted-space"></span></p>

</body>
</html>

解决方法

你不需要做任何特别的事情。通常情况下，文字会在单词之间中断。

如果那不会发生，那么

>要么容器太宽
>容器显式设置为不会在空格上中断。例如，如果它是< pre>元素，或者有css white-space：pre;或白色空间：nowrap;。
>文本包含不间断的空格(& nbsp;)而不是普通的空格。

解决方案：使用

white-space: pre-wrap;

它会使元素表现得像pre元素，除了它在行太长时也会包装。也可以看看：
http://css-tricks.com/almanac/properties/w/whitespace/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!