如何分解长话而忽略短话呢？

Question

我试图将文字换行以适应其中的父元素，但我在文本中遇到问题，如下图所示。

在左侧，单词＆＃39;反对＆＃39;虽然在右侧，单个单词太长，所以被正确分解以适应其父母的内容。以下是支持此功能的代码：

HTML：

<li>
    <div class="icon">
        <h5>D</h5>
    </div>
    <p class="label">Defending Ourselves Against Infectious Diseases</p>
</li>

<li>
    <div class="icon">
        <h5>D</h5>
    </div>
    <p class="label">DefendingOurselvesAgainstInfectiousDiseases</p>
</li>

CSS：

.label {
    word-break: break-all;
}

我最好喜欢左侧显示没有断裂的文本，右侧显示断点（以及用于表示断开的连字符），因为单词太长。

CSS解决方案会更好，但我认为解决这个问题的唯一方法是使用Javascript。我该如何解决此文本问题？

修改

此外，我不能只使用<br>代码，因为我希望将此代码应用于此类许多其他元素。

Answer 1

将word-break规则替换为word-wrap: break-word。

＆＃13;

＆＃13;

li {
    max-width: 200px;
    word-wrap: break-word;
}

＆＃13;

<ul>
    <li>
        <div class="icon">
             <h5>D</h5>
        </div>
        <p class="label">Defending Ourselves Against Infectious Diseases</p>
    </li>
    <li>
        <div class="icon">
             <h5>D</h5>
        </div>
        <p class="label">DefendingOurselvesAgainstInfectiousDiseases</p>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用自动换行代替分词。

如果你需要删除一些额外的文本，那么

1. 的 文本溢出：省略号 ;
2. 自动换行：break-word; （仅限IE7）

我找到了一篇好文章：

http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ http://www.impressivewebs.com/word-wrap-css3/

<强> JS

<div id="myDIV">GIVE YOUR TEXT</div>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
     document.getElementById("myDIV").style.wordWrap = "break-word";
}
</script>