如何分解冗長的詞彙，但忽略短詞彙？

我想包裝文本以適應它的父元素，但是我遇到了如下圖所示的文本問題。如何分解冗長的詞彙，但忽略短詞彙？

Image to show word break

在左側，單詞「反對」已被摧毀，並很難在右側雖然讀一個單詞太長，所以是正確的分解，以適應在它的父。下面是支持這種代碼：

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; 
}

我想最好像左側顯示沒有休息和右側的文本一邊顯示中斷（和一個連字符表示它被打破），因爲這個詞太長。

雖然我認爲解決這個問題的唯一方法是使用Javascript，但CSS解決方案會更好。我將如何解決這個文本問題？

編輯

另外，我不能只用一個<br>標籤，因爲我想這適用於這樣的許多其他元素。

來源

2015-06-20 Pav Sidhu

用word-wrap: break-word代替word-break規則。

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

<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>

來源

2015-06-20 12:50:17 JJJ

不「字突破：打破字; 「工作呢？ – DFayet

但是如何添加連字符？ –

@DFayet'word-break' [只接受]（https://developer.mozilla.org/en-US/docs/Web/CSS/word-break）'normal'，'break-all'或'keep- all'。如果某些瀏覽器支持「word-break：break-word」，那麼它就是非標準的。 – JJJ

使用換 -代替字斷。

如果你不得不削減一些額外的文本再有就是

文本溢出：省略號;
word-wrap：break-word;（只有在IE7）

我找到了一個很好的文章：

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

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

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

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

來源

2015-06-20 12:57:40

如何分解冗長的詞彙，但忽略短詞彙？

回答

相關問題