Css ile taşan yazıyı alt satıra geçirmek

furkandemirci Ağustos 27, 2020

1 5.382 Bir dakikadan az

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

<br /> See the Pen <a href='https://codepen.io/FurkanDemirci/pen/RwapoxO'>css-alt-satira-gecme</a> by furkanD<br /> (<a href='https://codepen.io/FurkanDemirci'>@FurkanDemirci</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Görsel Çıktısı

css-alt-satira-gecme

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>

Etiketler