<td> etiketine metni sarma

Bir <td>öğeye eklenen bazı metinleri sarmak istiyorum . İle denedim style="word-wrap: break-word;" width="15%". Ama metni sarmıyor. % 100 genişlik vermek zorunlu mu? Ben sadece% 15 genişlik kullanılabilir görüntülemek için diğer denetimlerim var.

TD metnini kaydırmak için

İlk set tablo stili

table{
    table-layout: fixed;
}

sonra TD Stilini ayarlayın

td{
    word-wrap:break-word
}

HTML tabloları, kullanıcı aracısının sütun genişliklerini içeriklerine uyarlamasını engelleyen bir "tablo düzeni: sabit" css stilini destekler. Kullanmak isteyebilirsiniz.

İnanıyorum ki 22 masaya rastladın. Tablolar, içeriği tablo biçimindeki bir yapıya sarmak için mükemmeldir ve içerdikleri içeriğin ihtiyaçlarını karşılamak için harika bir "esneme" işi yaparlar.

Varsayılan olarak tablo hücreleri içeriğe uyacak şekilde uzanır ... böylece metniniz onu daha da genişletir.

Birkaç çözüm var.

1.) TD üzerinde maksimum genişlik ayarlamayı deneyebilirsiniz.

<td style="max-width:150px;">

2.) Metninizi bir kaydırma öğesine (örn. Açıklık) koymayı ve üzerinde sınırlamalar koymayı deneyebilirsiniz.

<td><span style="max-width:150px;">Hello World...</span></td>

Yine de eski IE sürümlerinin min / maks genişliği desteklemediğini unutmayın.

IE yerel olarak maksimum genişliği desteklemediğinden, zorlamak istiyorsanız bir saldırı eklemeniz gerekir. Bir kesmek eklemenin birkaç yolu var, bu sadece bir tane.

Sayfa yüklendiğinde, yalnızca IE6 için, tablonun işlenen genişliğini (piksel olarak) alın, ardından% 15'ini alın ve bunu o sütundaki ilk TD'ye (veya başlıklarınız varsa TH) tekrar piksel olarak uygulayın .

table-layout:fixedgenişleyen hücre sorununu çözer, ancak yeni bir tane oluşturur. IE varsayılan olarak taşmayı gizler, ancak Mozilla onu kutunun dışında oluşturur.

Başka bir çözüm kullanmak olacaktır: overflow:hidden;width:?px

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>

.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

.tbl td {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

Http://www.blakems.com/archives/000077.html adresine verilen krediler

Bu benim için bazı css çerçeveleri (malzeme tasarımı lite [MDL]) ile çalıştı.

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}

kullanın word-breakbu stil olmadan kullanılabilir tableüzeretable-layout: fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}

<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

Bu gerçekten iyi çalışıyor:

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

Tüm genişlikleriniz için aynı genişliği kullanabilir <divveya metninizi istediğiniz yere kırmak için her durumda genişliği ayarlayabilirsiniz.

Bu şekilde sabit tabla genişlikleri veya karmaşık css ile dalga geçmenize gerek kalmaz.

Bazı tds vardı:

white-space: pre;

Bu benim için çözdü:

white-space: pre-wrap;

Hücre genişliğini metnin en uzun sözcüğü ile tam olarak aynı yapmak için, hücrenin genişliğini 1px

yani

td {
  width: 1px;
}

Bu deneysel ve deneme yanılma yaparken bunu öğrenmeye başladım

Canlı keman: http://jsfiddle.net/harshjv/5e2oLL8L/2/

Bunun işe yaraması mümkündür, ancak gelecekte bir noktada (hemen değilse) biraz sıkıntı olabilir.

<style> 
tbody td span {display: inline-block;
               width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
               overflow: hidden; 
               white-space: nowrap; }

</style>

...

<table>

<thead>...</thead>
<tfoot>...</tfoot>

<tbody>

<tr>

<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>

</tr>

</tbody>

</table>

Bunun mantığı span, başkaları tarafından işaret edildiği gibi, a <td>tipik olarak içeriğe uyum sağlamak üzere genişleyecek, buna karşılık <span>belirlenmiş bir genişlik sağlamak için - ve beklenmesi beklenen - bir; overflow: hiddenamaçlanmıştır, ancak, gizlemek ne başka neden olacak olmayabilir <td>genişletmek.

titleGörsel hücrede mevcut olan (veya kırpılan) metni göstermek için yayılma özelliğini kullanmanızı öneririm , böylece metin hala kullanılabilir (ve insanların görmesini istemiyorsanız / ihtiyacınız yoksa, neden var?) ilk etapta, sanırım ...).

Ayrıca, td {...}td için bir genişlik tanımlarsanız (veya potansiyel olarak daralır, ancak şüpheliyim) zımni genişliğini doldurmak için (bunun göründüğü gibi table-width/number-of-cells), belirtilen bir tablo genişliği oluşturmuyor gibi görünüyor aynı konu.

Dezavantajı sunum için kullanılan ek işaretleme.

Aslında metin kaydırma tablolarda otomatik olarak gerçekleşir. Test sırasındaki gaf insanlar varsayımsal olarak "ggggggggggggggggggggggggggggggggggggggggggggggg" gibi uzun bir dize varsaymak ve sarılmamasından şikayet etmektir. Pratik olarak İngilizce'de bu kadar uzun bir kelime yok ve olsa bile, bunun içinde kullanılması için hafif bir şans var <td>.

"Öngörü, önceden belirlenmiş durumlarda batıl inançtır" gibi cümlelerle test etmeyi deneyin.

TD'lerinize sınıflar uygulayın, uygun genişlikleri uygulayın (bunlardan birini genişlik olmadan bırakmayı unutmayın, böylece genişliğin geri kalanını varsayalım), ardından uygun stilleri uygulayın. Aşağıdaki kodu kopyalayıp bir düzenleyiciye yapıştırın ve işlevini görmek için bir tarayıcıda görüntüleyin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
  </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>