<td>요소에 추가 된 일부 텍스트를 래핑하고 싶습니다 . 나는 시도했다 style="word-wrap: break-word;" width="15%". 그러나 그것은 텍스트를 감싸지 않습니다. 너비를 100 %로 지정해야합니까? 너비를 15 % 만 사용할 수 있도록 표시 할 다른 컨트롤이 있습니다.
답변:
TD 텍스트를 감싸려면
첫 번째 설정 테이블 스타일
table{
table-layout: fixed;
}
그런 다음 TD 스타일을 설정하십시오
td{
word-wrap:break-word
}
white-space: normal(대신의 작업에 포장 얻을 수있는 TD 스타일 word-wrap:break-word)
white-space:normal;
white-space: pre-wrap공백을 보존해야하는 경우 사용하십시오 .
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;
}
이것은 일부 CSS 프레임 워크 (재료 디자인 라이트 (MDL))와 함께 나를 위해 일했습니다.
table {
table-layout: fixed;
white-space: normal!important;
}
td {
word-wrap: break-word;
}
사용하십시오 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>이것은 정말 잘 작동합니다 :
<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/
이것이 효과가있을 수도 있지만 장래 어느 시점에서 (즉시 그렇지 않은 경우) 약간의 성가신 것으로 보일 수 있습니다.
<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>의 이론적 근거 span는 다른 사람들이 지적한 바와 같이 a <td>는 일반적으로 컨텐츠를 수용하기 위해 확장되는 반면에 a <span>는 주어진 너비를 유지 하고 유지할 수 있다는 것입니다. 는 확장의 overflow: hidden원인이 <td>되는 것을 숨기려는 것이지만 숨길 수는 없습니다 .
title범위 의 속성을 사용하여 시각적 셀에 존재하거나 클리핑 된 텍스트를 표시하여 텍스트를 계속 사용할 수 있도록하고 사람들이 볼 수 없도록하거나 원하지 않는 경우 왜 그것을 가지고 있는지 확인하는 것이 좋습니다 우선, 나는 추측한다 ...).
또한 td {...}td가 묵시적 너비를 채우기 위해 확장 (또는 잠재적으로 수축하지만 의심 스럽습니다)에 너비를 table-width/number-of-cells정의하면 지정된 너비가 생성되지 않는 것 같습니다 같은 문제.
단점은 프리젠 테이션에 사용되는 추가 마크 업입니다.
실제로 텍스트 줄 바꿈은 테이블에서 자동으로 수행됩니다. 테스트하는 동안 사람들이 저지른 실수는 "ggggggggggggggggggggggggggggggggggggggggggggggggg"와 같은 긴 문자열을 가정하여 랩핑하지 않는다고 불평하는 것입니다. 실제로 영어로 된이 단어는 길지 않으며, 그 단어가 있더라도 그 단어 안에서 사용될 가능성은 희미합니다 <td>.
"사전 결정은 미리 결정된 상황에서 미신적이다"와 같은 문장으로 테스트 해보십시오.
클래스를 TD에 적용하고 적절한 너비를 적용한 다음 (너비가없는 나머지 너비를 가정하여 너비 중 하나를 남겨 두어야 함) 적절한 스타일을 적용하십시오. 아래 코드를 복사하여 편집기에 붙여넣고 브라우저에서보고 작동하는지 확인하십시오.
<!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>