<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;
}
답변
이것은 일부 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>