테이블 셀 <td> 내용을 강제로 래핑하는 방법은 무엇입니까?

146

전체 페이지 * 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와 테이블의 너비도 설정해야합니까?

html  css  html-table 
— 문서 휴일
소스
1
당신은 어디에 정의하고 wrappable있습니까?
— canon
2
.wrappable클래스 는 어디에 정의되어 있습니까? 어떤 브라우저를 사용하고 있습니까?
— Dani
사용중인 브라우저는 특히 중요합니다. 이전 버전의 IE는 지원하지 않습니다 max-width. 문제가 될 수있는 다른 많은 것들이 있으며 더 많은 정보 없이는 말할 수 없지만 그것은 파산 할 수있는 것입니다.
— 크리스 모건
Im 기본적으로 제출 된 텍스트를 폭 내에 유지하고 그것을 sybmit 한 후에 테이블을 늘리지 않으려 고 노력했습니다
— Doc Holiday
— Harsh Vakharia

답변:

292

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>
스 니펫 확장

— jim31415
소스
답을 시각적으로 스캔하는 사람들이 정답을 빠르게 얻을 수 있도록 답의 맨 위에 border-collapse : collapse 비트를 추가해야합니다.
— dwoodwardgb
조금만 더 수정 테이블 {border-collapse : collapse; table-layout : fixed; word-wrap : break-word;} 테이블 td {너비 : 100px; word-wrap : break-word;}
— Kuldeep Kumar
44

그것은 나를 위해 작동합니다.

<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%
}

— 라베 쿠쉬 아그라 왈
소스
15 
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
— 자프 스타
소스
6
이 사람에 대한 명확 할 것이다, 그래서 어쩌면 당신은 코드를 설명 할 수
— 페데리코
깔끔한 테이블을 보여 주지만 내용은 잘립니다. 즉. 내용이 많으면 단어를 볼 수 없습니다. overflow:hidden
— wpcoder
최대 너비를 하드 코딩하는 것은 좋지 않습니다. 큰 해상도 등으로 확장 할 수 없습니다. YOu는 테이블이 크기에 올바르게 응답 할 수 있기를 원합니다.
— user959690
4

Bootstrap 반응 형 테이블을 사용하는 경우 특정 열의 최대 너비를 설정하고 텍스트 줄 바꿈을 수행하여 다음과 같이이 열의 스타일을 지정하십시오.

max-width:someValue;
word-wrap:break-word
— 펭 한
소스
5
참고 max-width해야 px아닌 값%
— maxedison
3

이것은 셀에 "pretty"JSON을 표시해야 할 때 효과적이었습니다.

td { white-space:pre }

white-space속성 에 대한 자세한 내용 :

  • normal :이 값은 사용자 에이전트가 일련의 공백을 축소하고 행 상자를 채우는 데 필요한대로 행을 끊도록 지시합니다.

  • pre:이 값은 사용자 에이전트가 공백 시퀀스를 접는 것을 방지합니다.
    줄 바꿈 문자 만 유지하면 줄이 끊어집니다.

  • nowrap:이 값은에서와 같이 공백을 축소 normal하지만 텍스트 내에서 줄 바꿈을 억제합니다.

  • pre-wrap:이 값은 사용자 에이전트가 공백 시퀀스를 접는 것을 방지합니다.
    줄 바꿈 문자는 유지되며 줄 상자를 채우는 데 필요합니다.

  • pre-line:이 값은 사용자 에이전트가 일련의 공백을 축소하도록 지시합니다.
    줄 바꿈 문자는 유지되며 줄 상자를 채우는 데 필요합니다.

(또한 소스 에서 자세한 내용을 참조하십시오 .)

— 애슐리 도그
소스
0

열을 수정하려면 너비를 설정해야합니다. 예를 들면 다음과 같습니다.

<td style="width:100px;">some data</td>

— 유진
소스
1
나는 그것을 시도했다 ... 어떤 이유로 <td id = "comments-$ {comments.id}"class = "wrappable"style = "width : 100px"> $ {comments.comment} </ td >
— Doc Holiday
0

긴 문자열 (예 : 파일 경로 이름)이 있고 특정 문자 (슬래시와 같은)에서만 문자열을 나누려는 경우이 문제를 해결하는 또 다른 방법입니다. HTML에서 슬래시 바로 앞 (또는 뒤에)에 유니 코드 0 너비 공백 문자를 삽입 할 수 있습니다 .

— 마크 라 카타
소스
0 
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

이진 데이터로 테스트했으며 완벽하게 작동합니다.

— 자 이프
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.