CSS를 사용하여 텍스트를 감싸는 방법은 무엇입니까?
이 질문에 이미 답변이 있습니다.
<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>
이와 같은 텍스트를 CSS로 래핑하려면 어떻게해야합니까?
이것을 시도하십시오. IE8, FF3.6, Chrome에서 작동
<body>
<table>
<tr>
<td>
<div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
</td>
</tr>
</table>
</body>
"AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGG"를 입력하면 다음이 생성됩니다.
AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G
Google의 몇 가지 다른 웹 사이트에서 예제를 가져 왔습니다. 나는 이것을 ff 5.0, IE 8.0 및 Chrome 10에서 테스트했습니다. 모두에서 작동합니다.
.wrapword {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;
}
<table style="table-layout:fixed; width:400px">
<tr>
<td class="wrapword"></td>
</tr>
</table>
text-wrap을 사용하면 브라우저 지원이 상대적으로 약합니다 (초안 사양에서 예상 할 수 있음).
데이터에 공백이 아닌 긴 문자열이 없는지 확인하는 것이 좋습니다.
이것은 모든 곳에서 작동합니다.
<body>
<table style="table-layout:fixed;">
<tr>
<td><div style="word-wrap: break-word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></td>
</tr>
</table>
</body>
The better option if you cannot control user input, it is to establish the css property, overflow:hidden, so if the string is superior to the width, it will not deform the design.
Edited:
I like the answer: "word-wrap: break-word", and for those browsers that do not support it, for example, IE6 or IE7, I would use my solution.
참고URL : https://stackoverflow.com/questions/3949762/how-to-wrap-text-using-css
'code' 카테고리의 다른 글
| Gradle DSL 메서드를 찾을 수 없음 : 'compile ()' (0) | 2020.10.18 |
|---|---|
| Apache Tomcat 서버의 명령 프롬프트에서 디버그 모드를 시작하는 방법은 무엇입니까? (0) | 2020.10.18 |
| 비트 맵 크기 조정 / 크기 조정 후 이미지 품질이 좋지 않습니다. (0) | 2020.10.18 |
| XAMPP로 SSL 활성화 (0) | 2020.10.18 |
| JavaScript Regexp에서 임의의 수의 그룹을 캡처하는 방법은 무엇입니까? (0) | 2020.10.17 |