부모 컨테이너가 넘쳐 흐르는 html 테이블에 문제가 있습니다.
.page {
width: 280px;
border:solid 1px blue;
}
.my-table {
word-wrap: break-word;
}
.my-table td {
border:solid 1px #333;
}
<div class="page">
<table class="my-table">
<tr>
<th>Header Text</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Header Text</th>
</tr>
<tr>
<td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
</tr>
</table>
</div>
머리글 텍스트와 표 셀 텍스트를 모두 컨테이너에 올바르게 맞게 줄 바꿈하려면 어떻게해야합니까? CSS 전용 메소드를 선호하지만 절대적으로 필요한 경우 Javascript (또는 jQuery)를 사용할 수도 있습니다.
word-wrap: break-word;