li タグ内で改行をさせるには

html
1<style type="text/css">
2
3.test1 {
4    padding-left: 3px;
5    height: 400px;
6    width: 2200px;
7    overflow: scroll;
8    user-select: none;
9    -ms-user-select: none;
10    -webkit-user-select: none;
11    -moz-user-select: -moz-none;
12}
13.test1 ul {
14  margin: 0px 0px 0px 0px;
15  padding: 0px 0px 0px 0px;
16  list-style: none;
17  width: 2200px;
18}
19.test1 li {
20  display: inline-block;
21  height: 25px;
22  line-height: 25px;
23  white-space: nowrap;
24}
25
26.t1 {
27    width: 100px;
28    border-left: 1px solid #E0E0E0;
29    border-bottom: 1px solid #E0E0E0;
30    text-align: center;
31    float: left;
32    flex-wrap:wrap;
33}
34
35</style>
36
37<div class="test1">
38<ul id="L1" class="L1">
39    <li id="t1" class="t1">あいうえおかきくけこさしすせそたちつてと</li>
40</ul>
41</div>

「あいうえおかきくけこさしすせそたちつてと」の文字が表示される中で、
「こ」で改行表示させるにはどうしたらいいのでしょうか？
ここの値は不変的で、「あいうえ」だったり、「あいうえおかきくけこさしす」
だったりするので、ある一定の幅で改行させたく思います。
宜しくお願いします。

幅100px(width: 100px;)を超す場合は、改行して表示させるなどの方法で
実現するにはどうしたらいいでしょうか？
「flex-wrap:wrap;」としても改行されないでいます。

どなたかご教授を宜しくお願い致します。

miyabi_pudding

2020/08/17 02:50

br要素で改行させるじゃダメなんでしょうか？

m.ts10806

2020/08/17 03:34

幅10pxだとデフォルトフォントサイズの1文字の幅もないように思いますが、どういうことでしょうか。

kumakumatan

2020/08/17 04:23

100pxの間違いです。訂正いたしました。宜しくお願いします。

行動規範の内容に同意します

回答2件

brタグ入れるのがベターかと思いますが、ひとまず現状のコードだけだとwhite-space: nowrap;を除くとこうなります。

スタイルシートリファレンス:white-space

nowrap
ソース中のホワイトスペースを無視
ソース中の改行を1つの半角スペースとして表示
**ボックスサイズが指定されている場合にも自動改行しない **

投稿2020/08/17 04:49

m.ts10806

総合スコア80888

kumakumatan

2020/08/17 04:56

ご回答ありがとうございます。「あいうえおかきくけこさしすせ」のように改行コードがない場合はどうなるのでしょうか？宜しくお願いします。

m.ts10806

2020/08/17 04:57

現状提示されたコードに改行コードは含まれていませんよ。そのうえで私の回答に提示した結果になっています。

行動規範の内容に同意します

一番手っ取り早い方法

html
1<ul id="L1" class="L1">
2    <li id="t1" class="t1">あいうえおかきくけこ<br>さしすせそたちつてと</li>
3</ul>

span要素で区切る方法

html
1<ul id="L1" class="L1">
2    <li id="t1" class="t1"><span>あいうえおかきくけこ</span><span>さしすせそたちつてと</span></li>
3</ul>

css
1.test1 li span {
2  display: inline-block;
3}
4
5.t1 {
6    width: 10px;
7    border-left: 1px solid #E0E0E0;
8    border-bottom: 1px solid #E0E0E0;
9    text-align: center;
10    /* floatは用途がない限り使うべきではありません。（下手に使うとその後のレイアウトに多大な支障が出る）
11    flex-wrapは、fiex要素にしか効果がありません。よって、ここで使うのは意味がありません。
12    float: left;
13    flex-wrap:wrap;
14    */
15}