有没有办法防止一串没有空格的字母溢出其相应的边界？

Posted 2023-02-24

【中文标题】有没有办法防止一串没有空格的字母溢出其相应的边界？

【英文标题】：Is there a way to prevent a string of letters with no spaces from overflowing out of its corresponding boundaries?

【发布时间】：2011-02-01 00:58:26

【问题描述】：

这个问题非常简单，我尝试在每个列表条目的底部使用规则设置为clear:both; 和display:block; 的跨度，但没有成功。我真的不知道该怎么做。我不希望有很多具有长连续字母字符串的条目，但是例如，如果有人对 100 个字母执行 lolololololol 或 ahaahahahhhhhhhhhhhhaaaaaaaa，它将溢出。如果有人能给我指点，我将不胜感激。

【问题讨论】：

你在寻找什么行为，扩展父元素还是断词？ AFAIK，后者不可能仅使用 CSS，而前者取决于祖先的样式。请参阅：***.com/questions/320184/…、***.com/questions/363425/…、***.com/questions/322929/word-wrap-in-css-js 和许多其他人 (google.com/search?q=site:***.com+break+long+words)

我对没有空格的字符串也有同样的问题

欣赏它。我正在实现 php wordwrap 函数，如果你在后面执行它，它可以很好地与 htmlentities 一起使用。

如果使用零宽度空格字符会怎样？ （我相当肯定这在 unicode 中存在，但不知道它是什么——因为它来自一个模糊的可能不正确的回忆——或者它是如何在不同的浏览器上相互作用的，如果有的话。）

您还没有告诉我们您期望的行为。调查overflow 属性。

【参考方案1】：

您可以将overflow-x 属性设置为隐藏，但它会简单地切断超出该区域的任何内容...这是一个示例

http://jsfiddle.net/TFQNL/

否则我认为您需要以编程方式将其分解

【参考方案2】：

你在寻找什么行为，扩展父元素还是破坏单词？ AFAIK，后者不可能仅使用 CSS，而前者取决于祖先的样式。请参阅：***.com/questions/320184/...、***.com/questions/363425/...、***.com/questions/322929/... 和许多其他 (google.com/...) – outis

【参考方案3】：

有了 CSS 3，就有了一种 CSS 方式来解决这个问题：

word-wrap: break-word;

此属性源自 Microsoft，并被纳入 CSS3 规范。它在 Firefox 3.6、Safari 4、Chrome 5 上运行良好。

见：http://www.css3.info/preview/word-wrap/ 演示：http://hacks.mozilla.org/2009/06/word-wrap/

【讨论】：

可以看到***本身也使用了这个方案：***.com/questions/320184/…