拆分太長的單詞與' - '字符

我正在測試一些HTML和CSS的東西，我有一個問題。拆分太長的單詞與' - '字符

我有一些divs彼此相鄰浮動與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 | 
|    | 
|----------------|

來源

2014-10-04 JoJo

關：這個詞是新伯利恆專輯的標題。 – melancia 2014-10-04 15:01:22

它不是完全由supported你可以使用它在CSS中添加hypens。

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;

來源

2014-10-04 15:03:42 Tim

還有js解決方案：http://stackoverflow.com/questions/5963915/how-to-hyphenate-string-text-in-a-textarea-using-jquery。順便說一句這個博客幫了我一陣子：http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ – Tim 2014-10-04 15:06:19

非常感謝！有用！只是太糟糕了，它並不在某些瀏覽器中。 – JoJo 2014-10-04 15:41:12

-1

試試這個

width="auto"; // in css

，以便它涵蓋根據字的div大小趴在div。希望這可以幫助

來源

2014-10-04 15:16:57

對於英語和其他許多語言，在不添加連字符的情況下打破單詞是完全錯誤的。在任意點打破單詞也是錯誤的，word-wrap: break-word就是這樣做的。

要正確地打破英文單詞，您需要連字符。它有幾種方法和許多現有的問題。但在這種情況下，由於這個詞是一個發明的詞，所以你不能指望它被自動連字符正確連字。他們可能會意外地或正確地應用適合這種情況的算法。但唯一真正安全的方法是使用SOFT HYPHEN個字符（例如，）來手動添加連字符提示。

Hexakosioihexe&shy;kontahexaphobia

這取決於您決定允許的折點。我可能會使用

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

不需要的JavaScript，但是這也可以使用客戶端的JavaScript處理文檔的文本和替換他們的「連字符」版本的話做（即版本軟連字符）使用簡單的替換表。這對於保持源代碼的可讀性或在多次出現同一個單詞時簡化操作很有用。

來源

2014-10-04 21:00:29

拆分太長的單詞與' - '字符

回答

相關問題