HTML TD 랩 텍스트

HTML TD 랩 텍스트

---

<td>요소에 추가 된 일부 텍스트를 래핑하고 싶습니다 . 나는 시도했다 style="word-wrap: break-word;" width="15%". 그러나 그것은 텍스트를 감싸지 않습니다. 너비를 100 %로 지정해야합니까? 너비를 15 % 만 사용할 수 있도록 표시 할 다른 컨트롤이 있습니다.

---

TD 텍스트를 감싸려면

첫 번째 설정 테이블 스타일

table{
    table-layout: fixed;
}

그런 다음 TD 스타일을 설정하십시오

td{
    word-wrap:break-word
}

---

HTML 테이블은 "table-layout : fixed"CSS 스타일을 지원하여 사용자 에이전트가 열 너비를 내용에 맞추지 못하게합니다. 그것을 사용하고 싶을 수도 있습니다.

---

나는 당신이 22 개의 테이블을 잡았다 고 생각합니다. 표는 내용을 표 형식으로 정리하는 데 유용하며 포함 된 내용의 요구를 충족시키기 위해 "신축"작업을 훌륭하게 수행합니다.

기본적으로 표 셀은 내용에 맞게 확장되므로 텍스트가 더 넓어집니다.

몇 가지 해결책이 있습니다.

1.) TD에서 최대 너비를 설정할 수 있습니다.

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

2.) 텍스트를 줄 바꿈 요소 (예 : 범위)에 넣고 제한을 설정할 수 있습니다.

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

이전 버전의 IE는 최소 / 최대 너비를 지원하지 않습니다.

IE는 기본적으로 최대 너비를 지원하지 않으므로 강제로 해킹하려면 해킹을 추가해야합니다. 해킹을 추가하는 방법은 여러 가지가 있습니다.

페이지로드시 IE6의 경우에만 테이블의 렌더링 너비 (픽셀)를 얻은 다음 15 %를 가져 와서 해당 열의 첫 번째 TD (또는 헤더가있는 경우 TH)의 너비로 픽셀로 다시 적용하십시오 .

---

table-layout:fixed확장 셀 문제를 해결하지만 새로 만들 수 있습니다. IE는 기본적으로 오버플로를 숨기지 만 Mozilla는 상자 외부에서 오버플로를 렌더링합니다.

또 다른 해결책은 다음을 사용하는 것입니다. 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에 대한 크레딧

---

이것은 일부 CSS 프레임 워크 (재료 디자인 라이트 (MDL))와 함께 나를 위해 일했습니다.

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

td {
  word-wrap: break-word;
}

---

이것은 정말 잘 작동합니다 :

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

모든 너비에 동일한 너비를 사용 <div하거나 각 경우에 너비를 조정하여 원하는 곳에서 텍스트를 분리 할 수 ​​있습니다.

이 방법으로 고정 테이블 너비 또는 복잡한 CSS로 속일 필요가 없습니다.

---

셀 너비를 텍스트의 가장 긴 단어와 정확히 동일하게하려면 셀 너비를 1px

즉

td {
  width: 1px;
}

이것은 실험적 이며 시행 착오 를하는 동안 이것에 대해 알게되었습니다.

라이브 바이올린 : http://jsfiddle.net/harshjv/5e2oLL8L/2/

---

사용하십시오 word-break그것을 스타일링없이 사용할 수 있습니다 table에table-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>

---

이것이 효과가있을 수도 있지만 장래 어느 시점에서 (즉시 그렇지 않은 경우) 약간의 성가신 것으로 보일 수 있습니다.

<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>

The rationale for the span is that, as pointed out by others, a <td> will typically expand to accommodate the content, whereas a <span> can be given -and expected to keep- a set width; the overflow: hidden is intended to, but might not, hide what would otherwise cause the <td> to expand.

I'd recommend using the title property of the span to show the text that's present (or clipped) in the visual cell, so that the text's still available (and if you don't want/need people to see it, then why have it in the first place, I guess...).

Also, if you define a width for the td {...} the td will expand (or potentially contract, but I doubt it) to fill its implied width (as I see it this seems to be table-width/number-of-cells), a specified table-width doesn't seem to create the same issue.

The downside is additional markup used for presentation.

---

Actually wrapping of text happens automatically in tables. The blunder people commit while testing is to hypothetically assume a long string like "ggggggggggggggggggggggggggggggggggggggggggggggg" and complain that it doesn't wrap. Practically there is no word in English that is this long and even if there is, there is a faint chance that it will be used within that <td>.

Try testing with sentences like "Counterposition is superstitious in predetermining circumstances".

---

Apply classes to your TDs, apply the appropriate widths (remember to leave one of them without a width so it assumes the remainder of the width), then apply the appropriate styles. Copy and paste the code below into an editor and view in a browser to see it function.

<!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>

참고URL : https://stackoverflow.com/questions/1057574/html-td-wrap-text