HTML 테이블에서 자동 줄 바꿈
s와 s로 word-wrap: break-word텍스트를 감싸는 데 사용 했습니다 . 그러나 테이블 셀에서는 작동하지 않는 것 같습니다. 하나의 행과 두 개의 열로 테이블을 설정했습니다 . 위의 스타일로 표시되어 있지만 열의 텍스트는 줄 바꿈되지 않습니다. 텍스트가 셀 경계를 넘어갑니다. 이것은 Firefox, Chrome 및 Internet Explorer에서 발생합니다.divspanwidth:100%word-wrap
소스는 다음과 같습니다.
td {
border: 1px solid;
}<table style="width: 100%;">
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</div>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>위의 긴 단어는 내 페이지의 경계보다 큽니다. 그러나 위의 HTML과 충돌하지 않습니다. 나는 추가 아래의 제안을 해봤 text-wrap:suppress하고 text-wrap:normal있지만, 어느 쪽도 도움이되지 않습니다.
다음은 Internet Explorer에서 작동합니다. table-layout:fixedCSS 속성 추가
td {
border: 1px solid;
}<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table><td style="word-break:break-all;">longtextwithoutspace</td>
또는
<span style="word-break:break-all;">longtextwithoutspace</span>
장거리이지만 Firebug (또는 이와 유사한 것)로 실수로 다음 규칙을 상속받지 않았 음을 다시 확인하십시오 .
white-space:nowrap;
지정된 줄 바꿈 동작을 무시할 수 있습니다 .
이 작업을 수행하는 좋은 방법이 없다는 것이 밝혀졌습니다. 가장 가까운 것은 "overflow : hidden;"을 추가하는 것입니다. 테이블 주위의 div에 텍스트를 잃어 버립니다. 실제 해결책은 테이블을 버리는 것 같습니다. div와 상대 위치 지정을 사용하여 기존 효과를 제외한 동일한 효과를 얻을 수있었습니다.<table>
2015 업데이트 : 이것은이 답변을 원하는 나와 같은 사람들을위한 것입니다. 6 년 후, 모든 기고자에게 감사합니다.
* { // this works for all but td
word-wrap:break-word;
}
table { // this somehow makes it work for td
table-layout:fixed;
width:100%;
}
언급했듯이 텍스트를 div거의 작동시킵니다. 당신은 방금 지정해야 width의를 div정적 레이아웃에 대한 행운이다.
이것은 FF 3.6, IE 8, Chrome에서 작동합니다.
<td>
<div style="width: 442px; word-wrap: break-word">
<!-- Long Content Here-->
</div>
</td>
오버 플로우 랩을 사용하고 일반 테이블 레이아웃 + 테이블 너비 100 %에서 잘 작동하는 해결 방법
https://jsfiddle.net/krf0v6pw/
HTML
<table>
<tr>
<td class="overflow-wrap-hack">
<div class="content">
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div>
</td>
</tr>
</table>
CSS
.content{
word-wrap:break-word; /*old browsers*/
overflow-wrap:break-word;
}
table{
width:100%; /*must be set (to any value)*/
}
.overflow-wrap-hack{
max-width:1px;
}
혜택:
overflow-wrap:break-word대신에 사용 합니다word-break:break-all. 먼저 공백을 끊으려고 시도하고 단어가 컨테이너보다 큰 경우에만 단어를 자르기 때문에 더 좋습니다.- 아니
table-layout:fixed필요가 없습니다. 정기적 인 자동 크기 조정을 사용하십시오. - 고정
width또는 고정max-width픽셀 을 정의 할 필요가 없습니다 .%필요한 경우 부모를 정의하십시오 .
FF57, Chrome62, IE11, Safari11에서 테스트
코드 변경
word-wrap: break-word;
에
word-break:break-all;
예
<table style="width: 100%;">
<tr>
<td>
<div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
</td>
<td><span style="display: inline;">Short Content</span>
</td>
</tr>
</table>문제
<td style="word-break:break-all;">longtextwithoutspace</td>
텍스트 에 공백 이 있으면 잘 작동하지 않는다는 것입니다 . 예 :
<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>
단어 andthenlongerwithoutspaces가 한 줄에 표 셀에 들어가지만 long text with andthenlongerwithoutspaces그렇지 않은 경우 긴 단어는 줄 바꿈 대신 두 줄로 나뉩니다.
대체 솔루션 : 매 20 번째 문자 (예 : 아래 경고 참조)마다 긴 단어마다 U + 200B ( ZWSP ), U + 00AD ( 소프트 하이픈 ) 또는 U + 200C ( ZWNJ )를 삽입하십시오.
td {
border: 1px solid;
}<table style="width: 100%;">
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooong word
</div>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>경고 : 길이가 0 인 추가 문자를 삽입해도 읽기에는 영향을 미치지 않습니다. 그러나 클립 보드에 복사 된 텍스트에는 영향을 미칩니다 (물론 이러한 문자도 복사됩니다). 클립 보드 텍스트가 나중에 웹 앱의 일부 검색 기능에서 사용되면 검색이 중단됩니다. 이 솔루션은 일부 잘 알려진 웹 응용 프로그램에서 볼 수 있지만 가능하면 피하십시오.
경고 : 추가 문자를 삽입 할 때 grapheme 내에서 여러 코드 포인트를 분리하지 않아야합니다. 자세한 내용은 https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries 를 참조 하십시오 .
IE 8 및 Chrome 13에서 테스트되었습니다.
<table style="table-layout: fixed; width: 100%">
<tr>
<td>
<div style="word-wrap: break-word;">
longtexthere
</div>
</td>
<td><span style="display: inline;">Foo</span></td>
</tr>
</table>
이렇게하면 테이블이 페이지 너비에 맞고 각 열이 너비의 50 %를 차지합니다.
이 페이지의 이상을 차지하기위한 첫 번째 열을 선호하는 경우를 추가 width: 80%받는 td당신의 선택의 비율로 80 %를 대체, 다음 예제와 같이.
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="width:80%">
<div style="word-wrap: break-word;">
longtexthere
</div>
</td>
<td><span style="display: inline;">Foo</span></td>
</tr>
</table>
수행해야 할 유일한 것은 달성하려는 레이아웃에 따라 내부 <td>또는 <div>내부에 너비를 추가하는 것입니다 <td>.
예 :
<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>
또는
<table style="width: 100%;" border="1"><tr>
<td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>
이 데모를 확인하십시오
<table style="width: 100%;">
<tr>
<td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
</td>
<td>
<span style="display: inline;">Foo</span>
</td>
</tr>
</table>읽을 링크는 다음과 같습니다
현상금을 얻은 답은 정확하지만 테이블 의 첫 번째 행에 병합 / 결합 된 셀이 있으면 작동하지 않습니다 (모든 셀의 너비가 동일 함).
이 경우 colgroup및 col태그를 사용하여 올바르게 표시해야합니다.
<table style="table-layout: fixed; width: 200px">
<colgroup>
<col style="width: 30%;">
<col style="width: 70%;">
</colgroup>
<tr>
<td colspan="2">Merged cell</td>
</tr>
<tr>
<td style="word-wrap: break-word">VeryLongWordInThisCell</td>
<td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>
<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>
지정된 (비 상대) 너비 word-wrap:break-word;로 블록 요소 ( div) 를 설정해야합니다 . 전의:
<table style="width: 100%;"><tr>
<td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>또는 word-break:break-allAbhishek Simon의 제안에 따라 사용하십시오.
이것은 나를 위해 작동합니다 :
<style type="text/css">
td {
/* CSS 3 */
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
}
그리고 테이블 속성은 다음과 같습니다
table {
table-layout: fixed;
width: 100%
}
</style>
표 테두리가 필요하지 않은 경우 다음을 적용하십시오.
table{
table-layout:fixed;
border-collapse:collapse;
}
td{
word-wrap: break-word;
}
표는 기본적으로 줄 바꿈되므로 표 셀의 표시가 다음과 같은지 확인하십시오 table-cell.
td {
display: table-cell;
}
Firefox, Chrome 및 Internet Explorer 7-9에서 작동하는 것으로 나타났습니다. 한쪽에 긴 텍스트가있는 2 열 테이블 레이아웃을 수행합니다. 비슷한 문제를 찾기 위해 모든 것을 검색했으며 한 브라우저에서 다른 브라우저가 작동하거나 테이블에 더 많은 태그를 추가하는 것은 나쁜 코딩처럼 보입니다.
나는 이것을 위해 테이블을 사용하지 않았다. 구조에 DL DT DD. 최소한 2 열 레이아웃을 수정하기 위해 기본적으로 용어집 / 사전 / 단어 의미 설정입니다.
그리고 일반적인 스타일링.
dl {
margin-bottom:50px;
}
dl dt {
background:#ccc;
color:#fff;
float:left;
font-weight:bold;
margin-right:10px;
padding:5px;
width:100px;
}
dl dd {
margin:2px 0;
padding:5px 0;
word-wrap:break-word;
margin-left:120px;
}<dl>
<dt>test1</dt>
<dd>Fusce ultricies mi nec orci tempor sit amet</dd>
<dt>test2</dt>
<dd>Fusce ultricies</dd>
<dt>longest</dt>
<dd>
Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per.
</dd>
</dl>떠 다니는 줄 바꿈과 여백을 사용하여 필요한 것을 정확히 얻었습니다. 내가 이것을 다른 사람들과 공유 할 것이라고 생각했을 것입니다. 아마도 줄 바꿈하는 데 어려움이있는 2 열 정의 스타일 레이아웃을 가진 다른 사람을 도울 것입니다.
표 셀에서 단어 줄 바꿈을 사용해 보았지만 Internet Explorer 9 (및 Firefox 및 Chrome)에서만 작동했습니다. 주로 깨진 Internet Explorer 브라우저를 수정하려고했습니다.
style = "table-layout : fixed; width : 98 %; word-wrap : break-word"
<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >
데모-http: //jsfiddle.net/Ne4BR/749/
이것은 나를 위해 잘 작동했습니다. 웹 브라우저에서 테이블이 100 %를 초과 할 수있는 링크가 길었습니다. IE, Chrome, Android 및 Safari에서 테스트되었습니다.
Internet Explorer에서 테스트되지 않은 Chrome 및 Firefox에서 작동하는 솔루션 display: table-cell은 블록 요소 로 설정 하는 것입니다.
참고 URL : https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table
'development' 카테고리의 다른 글
| Java에서 명령 줄 인수를 어떻게 구문 분석합니까? (0) | 2020.02.10 |
|---|---|
| screenX / Y, clientX / Y 및 pageX / Y의 차이점은 무엇입니까? (0) | 2020.02.10 |
| C #에서 Java의 final과 동등한 것은 무엇입니까? (0) | 2020.02.10 |
| jQuery에서 PUT / DELETE 요청을 보내는 방법은 무엇입니까? (0) | 2020.02.10 |
| {get; (0) | 2020.02.10 |