2016-06-12 2 views
-1

liにある個々の単語や文字ではなく、改行したいタグの一覧(ul/li形式)を生成していますli個々の単語ではなくliに「ラップアラビア語」

私が何かをすることが判明しているだけのCSSコマンドは、これまでのところ、それはbreak-allであれば、それは任意の文字の後に解除されますword-breakた、normalは(またはnormalがデフォルトになります何か他のものは)それはスペースまたは後に破壊していますダッシュ-

Fiddle

現在、次のように私のCSSは次のとおりです。

li { 
    display: inline; 
    line-height: 24px !important; 
    border: 1px solid black; 
    word-break: normal; 
} 
+0

を使用することができます - https://jsfiddle.net/v8vcgtta/2/ –

答えて

1

は私が正しく理解する場合、チュ

:STは、私はあなたが必要なものを正しく理解していれば、単にあなたの liルールに

white-space: nowrap; 

を追加するトリックを行います、li

li { 
 
    display: inline-block; 
 
    line-height: 24px; 
 
    border: 1px solid black; 
 
}
<ul> 
 
    <li>This longword tag One</li> 
 
    <li>This longword tag Two</li> 
 
    <li>ThislongwordtagThree</li> 
 
    <li>This longword tag Four</li> 
 
    <li>This longword tag Five</li> 
 
    <li>This longword tag Six</li> 
 
    <li>This longword tag Seven</li> 
 
</ul> 
 
<ul> 
 
    <li>This longword tag One</li> 
 
    <li>This longword tag Two</li> 
 
    <li>ThislongwordtagThree</li> 
 
    <li>This longword tag Four</li> 
 
    <li>This longword tag Five</li> 
 
    <li>This longword tag Six</li> 
 
    <li>This longword tag Seven</li> 
 
</ul>

+0

はい、それは私がまさに必要だ - ありがとうございました。それが私に許されるとき、私はそれを正しいものとしてマークします。速やかなご返信ありがとうございます。 –

0

display:inline-blockように設定する必要があります
li { 
    display: inline; 
    line-height: 24px !important; 
    border: 1px solid black; 
    white-space: nowrap; 
} 

Here's the jsfiddle

0

あなたはこのように?:意味display: inline-blockまたはfloat: left;

関連する問題