アトリエロワ

table内の文字の折り返しが効かない時white-space: normal

HTML

<table><tbody>
<tr><th>テキスト</th><td>テキストテキストテキストテキストテキストテキストテキスト</td></tr>
</tbody></table>

CSS

overflow-wrap: break-word;
word-wrap: break-word;
white-space: normal;
上2つを入れてもできなかったので、3つ目を入れると出来ました。 

table {
  table-layout: fixed;
  width: 1200px;
}
table td {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}

tdにwhite-space:normal;を入れると、tableのtable-layout:fixed;を入れなくてもtd内の文字列が改行しました。

HOME > html+css > table内の文字の折り返しが効かない時white-space: normal

html+css

html+css

+ More