如何使用CSS在水平列表項中進行分詞

下面輸出的示例是這樣的：

|---------element width---------| 
abcdefghij ABCDEFGHIJ 
aaaaaaaaaaaaaaaaaaaaaaaaaa

這是我想：

|---------element width---------| 
abcdefghij ABCDEFGHIJ aaaaaaaaaa 
aaaaaaaaaaaaaaaa

我試圖浮動左，其他破字的CSS，指定寬度或最大寬度，等等。

li { display : inline-block; word-break : break-all; }

  <ul> 
 
       <li>abcdefghij</li> 
 
       <li>ABCDEFGHIJ</li> 
 
       <li>aaaaaaaaaaaaaaaaaaaaaaaaaa</li> 
 
      </ul>

來源

2016-11-09 mmrn

這裏小qeustion ......如果有如果最後

aaaaaaaaaaaaaaaaaaaaaaaaaa

後，一個新的li元素應該如何出現 – Geeky

要達到你想要的結果，你必須使用word-wrap: break-word。

http://www.w3schools.com/cssreF/css3_pr_word-wrap.asp

來源

2016-11-09 04:39:54

所面臨的挑戰是使'li'元素開始內聯和後包元素到達了邊界。看問題。「單詞包裝：訣竅詞」不足以解決問題。 – radbrawler

我試過了，並沒有奏效。 – mmrn

自動換行有4個值：

word-wrap: normal|break-word|initial|inherit;

但你比如你有顯着display : inline-block;

所以word-wrap:break-word會工作。請執行該

來源

2016-11-09 04:45:43 sandeep

不幸的是，''''''''''''''換句話說'break-word'不起作用。 – mmrn

li {display：inline-block;斷字：斷字;寬度：100px;向左飄浮; } – sandeep

但是每個Li都有自己的塊，因此它將在其特定的LI塊中進行包裝。我定義了寬度並設置了float：left。 – sandeep

因此，解決辦法是here

你需要把父<ul>與word-break: break-all財產這將打破時，他們溢出的子元素。子元素<li>需要使用block: inline屬性設置，以使它們排成一行。

ul { 
 
    width: 250px; 
 
    word-break: break-all; 
 
} 
 
li { 
 
    display: inline; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Word Break Test</title> 
 
</head> 
 

 
<body> 
 
    <ul> 
 
    <li>abcdefghij</li> 
 
    <li>ABCDEFGHIJ</li> 
 
    <li>aaaaaaaaaaaaaaaaaaaaaaaaaa</li> 
 
    </ul> 
 
</body> 
 

 
</html>

來源

2016-11-09 05:38:34 radbrawler

如何使用CSS在水平列表項中進行分詞

回答

相關問題