[CSS]table td内の半角英数数字が改行されずに横にのびる問題を回避する方法

CSSスニペット

2011.12.102024.08.25

横にのびる例
1. デモ
横にのびる問題を回避
1. デモ
補足

横にのびる例

<table class="table no-break" style="width: 500px;border:1px solid #dedede">
	<tbody>
		<tr>
			<th style="width: 20%">name</th>
			<td>1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg</td>
		</tr>
	</tbody>
</table>

<tbody>

<tr>

<td>1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg</td>

</tr>

</tbody>

</table>

デモ

name	1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg

横にのびる問題を回避

<style type="text/css">
.break {
	width: 500px;
	word-break: break-all
}
</style>

<table class="table break">
	<tbody>
		<tr>
			<th style="width: 20%">name</th>
			<td>1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg</td>
		</tr>
	</tbody>
</table>

.break {

width: 500px;

word-break: break-all

}

</style>