Word-break özelliği sayesinde taşan yazı sorununu çözeceksiniz. Word-break özelliği belli bir alana (örneğin; table, div, p) sığmayan metinleri, yazıları kesip alt satıra atmasıdır. Word-break iki değer alabilir. Bunlar normal ve break-word. Normal kullanırsanız taşmayı serbest kılmış olursunuz. Biz ise “word-wrap:break-word” kullanarak taşmaları engelleyerek alt satıra geçireceğiz. Aşağıdaki örneklerde ilk önce html paragraf (p) tagı kullanarak nasıl yapıldığı sonrasın’da ise html tablo da kullanımı örneği verilmiştir.
Kullanılması Gereken CSS Kodları
display: inline-block; // Browser destekleri için ilaveten kullanıyoruz word-break: break-word; table-layout:fixed; // Bu css kodu ise HTML tablonuz varsa kullanıyoruz
Aşağıda örnekleri inceleyerek nerede nasıl kullanıldığını daha iyi pekiştirebilirsiniz.
Canlı Demo
Görsel Çıktısı
Kaynak Kodlar
Aşağıdaki kaynak kodlar “html + css ” ile birlikte verilmiştir. Tümünü kopyalayıp “.html” şeklinde kayıt ettiğinizde hemen çalıştırabilirsiniz.
<html>
<head>
<style>
.doluClass
{
width:200px;
border:1px solid #000000;
word-break: break-word;
display: inline-block;
}
.normalClass
{
width:200px;
border:1px solid #000000;
}
table {
table-layout: fixed;
}
.dolutabloClass{
display: inline-block; word-break: break-word;
}
</style>
</head>
<body style="padding:30px;">
<h3 style="color:darkred;">CSS UYGULANMIŞ ÖRNEK PARAGRAF</h3><br>
<p class="doluClass">örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.</p>
<h3 style="color:darkred;">BASİT ÖRNEK PARAGRAF</h3><br>
<p class="normalClass">örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin.örnek_metin..</p>
<h2 style="text-align:center;"></h2><br>
<hr>
<h3 style="color:darkred;">CSS UYGULANMIŞ ÖRNEK TABLO</h3><br>
<table border="1">
<tr>
<th >Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td class="dolutabloClass">deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_</td>
<td>Jack</td>
<td>40</td>
</tr>
<tr>
<td>Coo</td>
<td>Moo</td>
<td>34</td>
</tr>
<tr>
<td>Mike</td>
<td>Hoo</td>
<td>70</td>
</tr>
</table>
<br><br>
<h3 style="color:darkred;">BASİT ÖRNEK TABLO</h3><br>
<table border="1">
<tr>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme_deneme</td>
<td>Jack</td>
<td>40</td>
</tr>
<tr>
<td>Coo</td>
<td>Moo</td>
<td>34</td>
</tr>
<tr>
<td>Mike</td>
<td>Hoo</td>
<td>70</td>
</tr>
</table>
</body>
</html>
