텍스트를 태그로 래핑
에 추가된 텍스트를 래핑하고 싶습니다.<td>요소.나는 시도해 봤습니다.style="word-wrap: break-word;" width="15%". 하지만 그것은 글을 포장하는 것이 아닙니다.폭 100%를 꼭 줘야 하는 건가요?표시할 수 있는 다른 컨트롤이 있어서 너비가 15%밖에 안 됩니다.
TD 텍스트를 래핑하려면
첫 번째 세트 테이블 스타일
table{
table-layout: fixed;
}
그런 다음 TD Style
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는 min/max-width를 지원하지 않습니다.
IE가 기본적으로 최대 너비를 지원하지 않기 때문에 강제로 사용하려면 해킹을 추가해야 합니다.해킹을 추가하는 방법은 여러 가지가 있습니다. 이것은 하나일 뿐입니다.
페이지 로드의 경우 IE6에 한해 테이블의 렌더링된 너비(픽셀 단위)를 얻은 다음 이의 15%를 해당 열의 첫 번째 TD(또는 헤더가 있는 경우 TH)에 다시 픽셀 단위로 적용합니다.
사용하다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>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>
이것은 몇 가지 CSS 프레임워크(Material Design Lite [MDL])와 함께 작동했습니다.
table {
table-layout: fixed;
white-space: normal!important;
}
td {
word-wrap: break-word;
}
.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 에 대한 크레딧
나는 나의 일부를 가지고 있었습니다.td다음 항목과 함께 지정:
white-space: pre;
이것으로 해결할 수 있었습니다.
white-space: pre-wrap;
이것은 정말 잘 작동합니다.
<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), 지정된 테이블 너비는 동일한 문제를 발생시키지 않는 것 같습니다.
단점은 프레젠테이션에 추가 마크업이 사용된다는 것입니다.
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>
실제로 텍스트 래핑은 테이블에서 자동으로 이루어집니다.사람들이 시험을 하면서 저지르는 실수는 "gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg실제로 영어에는 이렇게 긴 단어가 없고 설사 있다 하더라도 그 안에서 사용될 가능성은 희박합니다.<td>.
"일정한 상황에서 상대 위치는 미신입니다."와 같은 문장으로 테스트를 해보세요.
제가 해결할 수 있는 방법은 텍스트가 랩을 원하는 열에 다음을 추가하는 것입니다.white-space:normal
Chrome & Firefox에서도 동일한 동작이 발생합니다.
참고: Vue/Quasar q-table에 문제가 있었습니다.저는 css/sass를 통해 열의 최대 너비를 제한했습니다(Quasar의 q-table과 관련하여 이것이 맞는지 확실하지 않음).
<!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/wrap-text-in-td-tag
'programing' 카테고리의 다른 글
| 앱이 독립 실행형 상태인 경우 PWA 앱에서 Facebook 로그인이 작동하지 않음 (0) | 2023.11.02 |
|---|---|
| node.js 앱에 대한 코딩 스타일 가이드? (0) | 2023.11.02 |
| 사전 키가 열 레이블인 다중 인덱스 데이터 프레임에 중첩된 사전 (0) | 2023.11.02 |
| jQuery 토글 CSS? (0) | 2023.11.02 |
| MySQL 트리거 행 필드가 존재하는지 확인 (0) | 2023.11.02 |