Question

我正在测试一些html和css的东西，我有一个问题。

我有一些div与width:15%;相邻，当我输入长词时，它们重叠。我使用word-wrap:break-word找到了解决方案。

但是：我认为在没有短划线（ - ）字符的情况下分割单词会有点奇怪。

所以，现在，我的div看起来像这样：

<style>
    .floating-div{
       margin: 1px;
       float: left;
       padding: 1%;
       word-wrap: break-word;
    }
</style>

<div class="floating-div">
      <p>Hexakosioihexekontahexaphobia</p> <!--Just a random long word-->
</div>


|---------------|
|hexakosioihexe |
|kontahexaphobia|
|               |
|---------------|

我可以以某种方式让它自动添加这样的破折号吗？（通过使用css或javascript）

|----------------|
|hexakosioihexe- |
|kontahexaphobia |
|                |
|----------------|

Answer 1

未完全supported您可以使用在css中添加的连字符。

how to use automatic css hyphens with word-break: break-all?

 -ms-word-break: break-all;
 word-break: break-all;

 /* Non standard for webkit */
 word-break: break-word;

 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;

Answer 2

对于英语和许多其他语言，在不添加连字符的情况下断言是完全错误的。在任意点打破单词也是错误的，这是word-wrap: break-word所做的。

要正确破坏英文单词，您需要连字符。有几种方法，以及SO的许多现有问题。但在这种情况下，由于这个词是一个发明的词，你不能指望自动连字符正确地连字。他们可能会偶然地做到正确，或者因为他们应用了适用于这种情况的算法。但唯一真正安全的方法是使用SOFT HYPHEN字符添加手动连字提示，例如

Hexakosioihexe&shy;kontahexaphobia

由您决定允许的断点。我可能会用

Hexa&shy;kosioih&shy;exe&shy;konta&shy;hexa&shy;phobia

不需要JavaScript，但这也可以使用客户端JavaScript来处理文档的文本，并使用简单的替换表替换带有“带连字符”版本（即版本软连字符）的单词。这可能有助于保留源代码的可读性或简化多次出现相同单词时的内容。

Answer 3

试试这个

width="auto"; // in css

这样它就可以根据div中的单词覆盖div的大小。希望这有帮助

用＆＃39; - ＆＃39;分割太长的单词字符

3 个答案: