CSSを使用して水平リスト項目を単語分割する方法

横リストを作成してli内の単語区切りを有効にしたいとします。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 ...挑戦が 'li'要素は、インラインを開始し、後に包むようにすることです – Geeky

結果を得るには、word-wrap: break-wordを使用する必要があります。

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

出典

2016-11-09 04:39:54

表示方法最後

aaaaaaaaaaaaaaaaaaaaaaaaaa

後の新しいli要素であればそこにあれば要素が境界に達しました。質問を参照してください。 'word-wrap：break-word'は問題の必要性で十分ではありません。 – radbrawler

私はそれを試み、それは動作しませんでした。 – mmrn

ワードラップは4つの値があります：

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

をしかし、あなたの例ではあなたはとてもword-wrap:break-wordが動作する

display : inline-block;をマークしています。

出典

2016-11-09 04:45:43 sandeep

残念ながら、 'word-wrap：break-word'は動作しません。 – mmrn

li {display：inline-block;単語の区切り：区切りの単語;幅：100ピクセル。 float：left; } – sandeep

ですが、各Liには独自のブロックがあり、特定のLIブロックで折り返されます。私は幅を定義し、float：leftを設定しました。 – sandeep

だからソリューションは、あなたは彼らがオーバーフローするたびに子要素を中断しますword-break: break-allプロパティで親<ul>を配置する必要がありますhere

であることを実装してください。子の<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を使用して水平リスト項目を単語分割する方法

答えて

関連する問題