표의 내용을 제한하는 방법 (<td>)

Question

나는 때때로 달라질 수있는 테이블 데이터를 가지고있다. 사용자 주석을 채 웁니다. 주석은 데이터베이스에 저장되고 참조를 위해 html 테이블에 표시됩니다. 사용자 의견이 너무 많이 내릴 수 있습니다. HTML 표의 높이와 너비가 모든 데이터를 표시하기 위해 증가합니다. 하지만 난 위의 표에서 예를

<table> 
<th>id</th> 
<th>Comments</th> 
<th>User details</th> 
<tr> 
<td>1</td> 

<td>Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus</td> 


<td>John smith</td> 
</tr> 
</table> 

를 들어

.. 테이블에있는 태그에 대한 고정 높이와 너비를 부여 할 데이터베이스에서 수행 할 사용자 의견의 절반을 보여 코멘트 열은 exeeded 텍스트로 인해 확장됩니다. 한 줄 또는 두 줄만 표시하고 싶습니다.

CSS로 어떻게 할 수 있습니까?

Answer 1

당신은 그것을 할 래퍼를 추가해야합니다 .. 당신의 choise 될 수 있습니다 대안은 통신을자를 수 있습니다. 서버 측의 페이지에로드되기 전에 그런 다음 전체 주석에 대한 링크가 잘린 부분을 잘라내어 일부 텍스트 만 숨기는 것보다 사용자 친화적 인 방법임을 나타낼 수 있습니다.

Answer 2

max-width 및 max-height과 함께 overflow: hidden에 내용을 할당하려면 CSS를 사용하십시오. 그 트릭을해야합니다.

<td> 
    <div class="cont">Lorem ipsum dolor sit amet consectetuer adipiscing elit 
     Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit 
     sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla 
     odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus 
    </div> 
</td> 

을 그리고 CSS :

.cont { 
    overflow: hidden; 
    width: 300px; /* or other */ 
    -o-text-overflow: ellipsis; /* Opera */ 
     text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Answer 3

쓰기

<td style="width: 300px;">Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus</td> 

300 픽셀은

Answer 4

더 나은