테이블 셀 내용을 강제로 래핑하는 방법은 무엇입니까?
전체 페이지 * wrappable은 main.css 파일에 정의되어 있습니다.
/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
white-space: normal;
}
전체 페이지는 다음과 같습니다.
<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">
<ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
<ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry? entryId=${entry.entryId}" />
<table class="data_table vert_scroll_table">
</tr>
<tr>
<ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
</tr>
<c:forEach var="comments" items="${entry.comments}">
<tr id="id${comments.id}">
<td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
</tr>
</c:forEach>
<c:if test="${lock.locked || form.entryId < 0 }">
<%-- This is the row for adding a new comment. --%>
<tr id="commentRow">
<td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
<a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
</td>
</tr>
</c:if>
</table>
</ctl:vertScroll>
</form>
제출할 때마다 늘어납니다.
이 페이지는 div 내에 있습니다. div와 테이블의 너비도 설정해야합니까?
table-layout:fixed테이블과 word-wrap:break-wordtd에서 사용하십시오 .
이 예제를보십시오 :
<html>
<head>
<style>
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<tr>
<td>2</td>
<td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
</tr>
<tr>
<td>3</td>
<td></td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
</tr>
</table>
</body>
</html>
데모:
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;} <table>
<tr>
<td>1</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<tr>
<td>2</td>
<td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
</tr>
<tr>
<td>3</td>
<td></td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
</tr>
</table>
그것은 나를 위해 작동합니다.
<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%
}
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
Bootstrap 반응 형 테이블을 사용하는 경우 특정 열의 최대 너비를 설정하고 텍스트 줄 바꿈을 원하면 다음과 같이이 열의 스타일도 작동합니다.
max-width:someValue;
word-wrap:break-word
이것은 셀에 "pretty"JSON을 표시해야 할 때 효과적이었습니다.
td { white-space:pre }
white-space속성 에 대한 자세한 내용 :
normal:이 값은 사용자 에이전트가 일련의 공백을 축소하고 행 상자를 채우는 데 필요한대로 행을 끊도록 지시합니다.
pre: This value prevents user agents from collapsing sequences of white space.
Lines are only broken at preserved newline characters.
nowrap: This value collapses white space as fornormal, but suppresses line breaks within text.
pre-wrap: This value prevents user agents from collapsing sequences of white space.
Lines are broken at preserved newline characters, and as necessary to fill line boxes.
pre-line: This value directs user agents to collapse sequences of white space.
Lines are broken at preserved newline characters, and as necessary to fill line boxes.
(Also, see more at the source.)
If you want fix the column you should set width. For example:
<td style="width:100px;">some data</td>
This is another way of tackling the problem if you have long strings (like file path names) and you only want to break the strings on certain characters (like slashes). You can insert Unicode Zero Width Space characters just before (or after) the slashes in the HTML.
.wrappable {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
I have tested with the binary data and its working perfectly here.
Just add: word-break: break-word; to you table class.
참고URL : https://stackoverflow.com/questions/6666532/how-to-force-table-cell-td-content-to-wrap
'Programing' 카테고리의 다른 글
| CSS3 스핀 애니메이션 (0) | 2020.06.19 |
|---|---|
| 웹 API 메시지 핸들러에서 사용자 정의 헤더 값을 추출하는 방법은 무엇입니까? (0) | 2020.06.19 |
| 클릭 탭시 쉘 초기화 문제, getcwd의 문제점은 무엇입니까? (0) | 2020.06.19 |
| matplotlib : 선의 개별 점에 대한 마커를 설정합니다 (0) | 2020.06.18 |
| data.frame에서 그룹당 평균 (0) | 2020.06.18 |