HTML 표에서 텍스트 단어 줄 바꿈

데이터베이스의 데이터로 채워진 표가 있습니다. 기본 테이블 레이아웃은 다음과 같은 :HTML 표에서 텍스트 단어 줄 바꿈

<table class="cssTable"> 
    <tr> 
    <td class="cssRowCell1">1.</td> 
    <td class="cssRowCell2">Data here</td> 
    </tr> 
</table>

문제는 데이터베이스가에 공백없이 텍스트의 긴 줄이 포함 된 경우, 텍스트가 페이지를 감싸되지 않는 것입니다 및 오른쪽에서 튀어 그 페이지.

나는 다음없고 전혀 일을하려고 이런 일 :

1 추가는 CSS에 다음

<td class="cssRowCell1" width="2%">1.</td> 
<td class="cssRowCell2" width="98%">Data here</td>

어떤 생각 : 명시 적으로 테이블 폭을 추가하려고

.cssRowCell2 
{ 
    min-width: 880px; 
    word-wrap: break-word; 
    overflow: hidden; 
}

2 잘 보이게 만드는 방법?

출처

2012-03-04 ahmd0

CSS로해야합니까? 또는 표시되기 전에 스크립트에서 수정할 수 있습니까 (아니면 데이터베이스에 저장되기 전에). 나는 당신이 css로 단어를 깨뜨릴 수는 없다고 확신하지만 overflow : hidden과 text-overflow : 생략 부호로 그것을 숨길 수는있다. javascript가 옵션입니까? – Rob

그래, 내가 할 수있는 유일한 방법은 ASP.NET 스크립트에 있지만, 문제는 내가 줄 바꿈을 올바르게 도입하기 위해 서버에서 페이지의 너비를 알 수 없다는 것입니다. – ahmd0

나는 CSS가 어떻게 든 적용되지 않는다고 생각합니다. 이전에'word-wrap : break-word '를 사용했고 모든 최신 브라우저에서 작동하는 것으로 나타났습니다. 그 밖의 것이 없다면, 'overflow : hidden'은 긴 단어를 잘라 내야합니다. – jpsimons

white-space을 가지고 놀았습니까?

출처

2012-03-04 21:44:32 jerone

나는 공백을 시도했다 : 전 포장; 그러나 텍스트의 긴 덩어리 앞에 새로운 라인을 추가하기 만하면됩니다. – ahmd0

질문을 다시 읽은 후에는 문제가 표 너비에 있다고 생각합니다. 표에 너비를 설정해보십시오. 온라인 예제가 도움이 될 것입니다. – jerone

음, 그냥 멋진 라이브러리가 있습니다. 바로 Hyphenator입니다.) 그리고 나는 꽤 잘 설명 된 것처럼 this discussion을 체크 아웃 할 것을 제안 할 것이다. 그런데 오히려 오래된 질문입니다.)

출처

2012-03-04 21:48:05 raina77ow

지금까지는 나를 위해 작동하는 유일한 방법은 서버 측 스크립트에 공백을 넣는 것입니다 (그러나 스크립트에서 보여준 것처럼). 그러나 여기서는 텍스트의 각 행이 얼마나 넓은 지 알지 못하므로 결과적으로 줄 바꿈도 나 빠진다. – ahmd0

단어 (하이픈 넣기를 허용하는 영어 또는 기타 언어)에 선택적 하이픈 지점을 지정하려면 SOFT HYPHEN U + 00A0 문자 또는 이와 유사한 엔터티 참조 을 삽입하십시오.

문자열에 foo/bar/zap과 같은 선택적 줄 바꿈 지점을 지정하려면 W3C 권장 사항에 위배되는 마크 업 <wbr>을 삽입하십시오. 그러나 특히주의 사항이있을 경우 (http://www.cs.tut.fi/~jkorpela/html/nobr.html) 특히 잘 작동합니다.

신뢰할 수있는 (서투른) 방법 외에도 언어 규칙과 함께 CSS 규칙 hyphens: auto처럼 훨씬 덜 자주 (그러나 더 우아함) 작동하는 방법을 고려할 수 있습니다.

출처

2012-03-05 06:09:08

도움이 될만한 코드를 사용하십시오. 당신이 컬럼에 설정할 폭이 얼마나 난 그냥 테이블 태그에 style="table-layout:fixed"을 추가하고 폭 100%을 설정 한

<table border="1" cellspacing="0" cellpadding="0" class="cssTable" style="table-layout:fixed" width="100%"> 
    <tr> 
    <td width="8%" class="cssRowCell1">1.</td> 
    <td width="92%" class="cssRowCell2">Data here 
    </td> 
    </tr> 
</table>

는이 있음에 따라 완전히됩니다.

참고 : CSS는 앞서 언급 한 것과 같습니다.

출처

2012-03-05 06:30:43 w3uiguru

표 셀 스타일 시트와 함께 "word-wrap : break-word;" 인 경우 테이블 레이아웃 : 고정을 테이블 스타일 시트에 추가하십시오. 효과가있을 것입니다.

출처

2014-05-18 16:28:13

HTML 표에서 텍스트 단어 줄 바꿈

답변

관련 문제