HTML 표의 단어 모음
계속 사용하고 있습니다.word-wrap: break-word텍스트를 랩으로 감다div모래땅span하지만, 그것은 테이블 세포에서 작동하지 않는 것처럼 보입니다.할 테이블이 준비되어 있습니다.width: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;
이는 지정된 줄 바꿈 동작을 재정의하여 단어 래핑을 해제할 수 있습니다. (쉐인 리와 비어 미의 코멘트) 이 문제를 해결하려면 다음을 추가할 수 있습니다.white-space:normal;양식에 맞게
이렇게 하는 데는 좋은 방법이 없습니다.가장 가까운 것은 테이블 주위의 div에 "overflow:hidden;"을 추가하고 텍스트를 잃는 것입니다.하지만 진짜 해결책은 식탁을 버리는 것처럼 보입니다.을 사용하여 디와브상위설치사정동용의 을 뺀 효과를 수 .<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;
}
이점:
- 대신 사용
word-break:break-all어떤 것이 더 나은지는 공간을 먼저 부수고 단어가 컨테이너보다 클 때만 단어를 잘라내기 때문입니다. - 아니요.
table-layout:fixed조정 합니다.일반적인 자동 크기 조정을 사용합니다. - 고을정필없습다니요가할의정을 .
width또는 고정된max-width픽셀 단위로정의%필요한 경우 부모의.
FF57, Chrome62, IE11, Safari11에서 테스트됨
문제:
<td style="word-break:break-all;">longtextwithoutspace</td>
예를 들어 텍스트에 공백이 있을 때는 잘 작동하지 않습니다.
<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>
단어 if 단어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인 문자를 추가로 삽입해도 판독에 영향을 주지 않습니다.그러나 클립보드에 복사된 텍스트에 영향을 미칩니다(물론 이러한 문자도 복사됩니다).나중에 클립보드 텍스트가 웹 앱의 일부 검색 기능에 사용되는 경우...검색이 중단될 것입니다.이 솔루션은 일부 잘 알려진 웹 응용 프로그램에서 볼 수 있지만 가능하면 사용하지 마십시오.
경고: 추가 문자를 삽입할 때는 그래프 내에서 여러 코드 포인트를 구분해서는 안 됩니다.자세한 내용은 https://unicode.org/reports/tr29/ #Grapheme_Cluster_Boundaries를 참조하십시오.
코드 변경
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> <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>여기에 읽을 링크가 있습니다.
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>
이 필요한 것 .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-all아비셰크 사이먼의 제안에 따라.
현상금을 획득한 정답은 맞지만, 테이블의 첫 번째 행에 병합/결합된 셀이 있으면 작동하지 않습니다(모든 셀의 너비가 동일함).
는 이경에사합니다야용해다음을는을 .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>
나는 모든 것을 시도했지만 나의 경우에는 나를 위해 일만 합니다.
white-space: pre-wrap;
word-wrap: break-word;
저도 비슷한 문제에 부딪혔습니다.앵귤러 스타일의 부트스트랩 모달 안에 테이블이 있었습니다.JS 애플리케이션.표의 필터를 변경하면 해당 셀에 긴 값이 나타나는데, 셀 외부와 모달 외부에서 텍스트가 넘칩니다.이 CSS는 TD에 적용되어 문제를 해결했습니다.
style="white-space:pre-wrap; word-break:break-word"
따라서 테이블 내용이 변경된 경우에도 값이 올바르게 래핑됩니다.
이것은 나에게 도움이 됩니다.
<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;
}
는 우리가 두 속성을 있다는 입니다: 여서일반로으혼문는제두는가지다것입다른 CSS니기는다있.word-wrap그리고.word-break그리고 워드랩에는 다음과 같은 옵션이 있습니다.break-word ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ :-)
은 테이블 적일반으로이것테은안이에효있도과었다니습가서블▁usually다있:니었습,▁for▁worked▁table효▁a▁inside▁me과가▁this.word-break: break-word;
도움이 될 수도 있지만,
CSS
.wrap-me{
word-break: break-all !important;
}<table>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
</tr>
</thead>
<tbody>
<tr> <td class="wrap-me">tesetonlywithoutspacetesetonlywithoutspacetesetonlywithoutspace</td>
<td class="wrap-me">test only</td>
<td class="wrap-me">test with space long text</td>
<td class="wrap-me">Col 4</td>
<td class="wrap-me">Col 5</td>
<td class="wrap-me">Col 6</td>
<td class="wrap-me">Col 7</td>
</tr>
<tr>
<td class="wrap-me">test only</td>
<td class="wrap-me">test only</td>
<td class="wrap-me">test with space long text</td>
<td class="wrap-me">testwithoutspacetestonlylongtext</td>
<td class="wrap-me">Col 5</td>
<td class="wrap-me">Col 6</td>
<td class="wrap-me">Col 7</td>
</tr>
</tbody>
</table>Firefox, Google Chrome 및 Internet Explorer 7-9에서 작동하는 것처럼 보이는 솔루션을 찾았습니다.한 쪽에 긴 텍스트가 있는 두 열 표 레이아웃을 수행하는 데 사용됩니다.비슷한 문제가 있는지 검색해 봤는데, 한 브라우저에서 작동하는 것이 다른 브라우저를 깨거나 테이블에 태그를 더 추가하는 것은 잘못된 코딩처럼 보입니다.
저는 이것을 위해 테이블을 사용하지 않았습니다.DLD 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>부동의 단어 포장과 마진을 사용하여, 저는 제가 필요로 하는 것을 정확히 얻었습니다.이것을 다른 사람들과 공유하고 싶다고 생각했는데, 아마도 다른 사람이 두 개의 열로 된 정의 스타일 레이아웃을 사용하여 단어를 마무리하는 데 어려움을 겪을 수 있습니다.
테이블 셀에서 워드랩을 사용하려고 했지만, 주로 Internet Explorer 9(그리고 Firefox 및 Google Chrome)에서만 작동했습니다. 여기서 고장난 Internet Explorer 브라우저를 수정하려고 했습니다.
저는 같은 문제가 있습니다. 이 일은 저에게 좋습니다.
<style>
td{
word-break: break-word;
}
</style>
<table style="width: 100%;">
<tr>
<td>Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
가 "" " " " " " "인지 합니다.table-cell:
td {
display: table-cell;
}
style="table-word:고정, 너비:98%, 단어 선택: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에서 테스트되었습니다.
및 Firefox않음)와 함께 작동하는 은 Google Chrome 에 Firefox 및는솔은하루션 (Internet Explorer에서 테스트되지 않음)를 설정하는 입니다.display: table-cell블록 요소로서.
마음에 드신다면 한 번 드셔보세요
td 안에 텍스트 영역을 넣고 배경색 흰색으로 비활성화하고 행 수를 정의합니다.
<table style="width: 100%;">
<tr>
<td>
<textarea rows="4" style="background-color:white;border: none;" disabled> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</textarea>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>
너비만 추가하면 됩니다.이것은 저에게 효과가 있었습니다.
<td style="width:10%;"><strong>Item Name</strong></td>
만약 당신이 문자에만 관심이 있다면, 당신은 그것을 할 수 있습니다.table-layout:fixed
<table>
<tr>
<td>
Title
</td>
<td>
Length
</td>
<td>
Action
</td>
</tr>
<tr>
<td>
Long song name
</td>
<td>
3:11
</td>
<td>
<button>
Buy Now!
</button>
</td>
</tr>
<tr>
<td colspan=3>
<div style='width:200px;background-color:lime;margin-left:20px'>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>quick </div>
<div style='float:left;white-space:pre'>brown </div>
<div style='float:left;white-space:pre'>foxed </div>
<div style='float:left;white-space:pre'>jumped </div>
<div style='float:left;white-space:pre'>over </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>lazy </div>
<div style='float:left;white-space:pre'>brown </div>
<div style='float:left;white-space:pre'>cat </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
</div>
</td>
</tr>
<tr>
<td>
Long song name1
</td>
<td>
2:20
</td>
<td>
<button>
Buy Now!
</button>
</td>
</tr>
</table>
저의 경우, 저는 최상의 결과를 얻기 위해 단어 구분과 공백 사전 랩을 모두 사용해야 했습니다.더 많은 도움이 되길 바랍니다.
<td class="wrap-longtext">
long,longlonglonglonglonglonglong..................
</td>
<style>
.wrap-longtext
{
word-break: break-all;/* Use break-word, if you prefer sensible text than short width of the cell */
white-space: pre-wrap;
}
</style>
단어 랩: 브레이크 워드; CSS 속성을 사용할 때도 테이블 셀의 단어 랩에 문제가 있는 것 같습니다.테이블 요소에 개별 셀에 설정하는 속성을 재정의할 수 있는 자체 레이아웃 규칙이 있기 때문일 수 있습니다.
이 문제를 해결하려면 테이블 요소의 테이블 레이아웃 속성을 고정으로 설정하면 테이블 셀의 너비와 높이가 고정되고 워드랩이 제대로 작동합니다.
다음은 테이블 레이아웃 속성이 추가된 코드의 업데이트된 버전입니다.
<style>
td {
border: 1px solid;
}
table {
width: 100%;
table-layout: fixed; /* Add this line */
}
</style>
<table>
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</div>
</td>
<td>
<span style="display: inline;">Short word</span>
</td>
코드가 잘 들여쓰기되지 않은 경우 죄송합니다.
언급URL : https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table
'codememo' 카테고리의 다른 글
| 각 ng 모듈의 엔트리 구성 요소란 무엇입니까? (0) | 2023.05.03 |
|---|---|
| Xcode 4: .xarchive 대신 IPA 파일 생성 (0) | 2023.05.03 |
| 'DOMAIN\MACHINE$' 사용자에 대한 로그인 실패 (0) | 2023.05.03 |
| 자동 배치 - 절반의 수퍼뷰 높이를 기준으로 높이 설정 (0) | 2023.05.03 |
| 매우 큰 테이블에서 정확한 행 수를 계산하는 가장 빠른 방법은 무엇입니까? (0) | 2023.05.03 |