반응형
이 예제에서는 자동 줄 바꿈이 작동하지 않습니다.
이 예제에서는 자동 줄 바꿈을 사용할 수 없습니다.
<html>
<head></head>
<body>
<table style="table-layout:fixed;">
<tr>
<td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>
</body></html>
레이아웃을 지정해야한다는 것을 읽은 기억이 났지만 (내가 한 작업) 그 이상으로이 작업을 수행하려면 어떻게해야하는지 잘 모르겠습니다. 나는 이것이 Firefox에서 작동하기를 정말로 원합니다. 감사.
수정 : Chrome 19 및 Firefox 12에서 실패, IE8에서 작동합니다. 나는 엄격하고 과도적인 doctype을 시도했지만 작동하지 않았습니다.
Mozilla Firefox 솔루션
더하다:
display: inline-block;
귀하의 td.
Webkit 기반 브라우저 ( Google Chrome , Safari 등) 솔루션
더하다:
display: inline-block;
word-break: break-word;
귀하의 td.
참고 : 현재break-word로서는 웹킷에 대한 표준 사양의 일부가 아닙니다. 따라서break-all대신사용하는 데 관심이있을 수 있습니다. 이 대체 값은 의심 할 여지없이 과감한 솔루션을 제공합니다. 그러나 표준을 준수합니다.
오페라 솔루션
더하다:
display: inline-block;
word-break: break-word;
귀하의 td.
이전 단락은 유사한 방식으로 Opera에 적용됩니다.
모든 브라우저에서 작동하는 이 코드 ( css-tricks에서 가져옴 )를 사용하십시오.
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
이 속성 조합은 다음과 같은 도움이되었습니다.
display: inline-block;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
line-break: strict;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;
스마트 브레이크 (브레이크-워드)가 다른 브라우저에서 잘 작동하도록하려면 다음과 같은 규칙을 사용했습니다.
#elm {
word-break:break-word; /* webkit/blink browsers */
word-wrap:break-word; /* ie */
}
-moz-document url-prefix() {/* catch ff */
#elm {
word-break: break-all; /* in ff- with no break-word we'll settle for break-all */
}
}
이 코드도 작동합니다.
<html>
<head></head>
<body>
<table style="table-layout:fixed;">
<tr>
<td style="word-break: break-all; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>
</body></html>word-wrap부동산 작업 display:inline-block:
display: inline-block;
word-wrap: break-word;
width: 100px;
ReferenceURL : https://stackoverflow.com/questions/10743763/word-wrap-break-word-does-not-work-in-this-example
반응형
'Programing' 카테고리의 다른 글
| Scala에서 IEnumerable LINQ에 해당하는 차트? (0) | 2021.01.10 |
|---|---|
| MySQL : 여러 열의 MAX 또는 GREATEST를 가져 오지만 NULL 필드 (0) | 2021.01.10 |
| 디렉토리가 있는지 어떻게 확인할 수 있습니까? (0) | 2021.01.10 |
| 유한 높이의 자식이 있더라도 부모 div의 높이는 0입니다. (0) | 2021.01.10 |
| SQL Server Express에서 연결할 수 없음 오류 : 28-서버가 요청 된 프로토콜을 지원하지 않습니다. (0) | 2021.01.10 |