부트 스트랩 테이블이 확장되지 않은 긴 텍스트로 넘침

부트 스트랩을 사용하고 있으며 몇 개의 열이있는 테이블이 있습니다. 마지막 테이블에는 공백없이 긴 텍스트가있는 경우가 있습니다. 특정 화면 크기에서 테이블이 부모 div를 오버플로하고 형제 테이블과 겹쳐서 겹쳐 보일 것으로 나타났습니다.부트 스트랩 테이블이 확장되지 않은 긴 텍스트로 넘침

나는 그걸로 놀았고 나는이 문제가 텍스트의 간격을 벗어난 것과 관련이 있다고 생각한다. 내가 의미하는 바를 보여주는 jsfiddle을 만들었습니다.

위에서 볼 수 있듯이 맨 위 왼쪽 테이블은 잘 작동하고 더 많은 텍스트를 수용하기 위해 세로로 커집니다. 그러나 왼쪽 하단 표는 긴 간격없는 텍스트로 인해 오른쪽에 오버플로가 생기고 왼쪽 하단 표의 오른쪽 열은 형제 아래 "위로"감겨집니다.

긴 텍스트가 잘 리거나 부분적으로 줄 바꿈되도록이 문제를 해결할 수있는 방법에 대한 조언이있는 사람이 있습니까?

출처

2012-08-30 Richard Bender

109

은 당신이 원하는대로 그럼 당신은 비아 CSS 레이아웃을 조정할 수 있습니다 <table>

.the-table { 
    table-layout: fixed; 
    word-wrap: break-word; 
}

에 다음과 같은 스타일을 추가합니다. 이 테이블 레이아웃을 시작하지 않고 작동

출처

2012-09-04 12:59:02 albertedevigo

참고하시기 바랍니다 아니라, 사용 오버 플로우 : 휴식 단어를 당신이 잘못 생각 – unidha

@unidha합니다. [작업 초안] (http://www.w3.org/TR/css3-text/) 또는 [편집자 초안] (http://dev.w3.org/csswg/css-text-3)을 확인할 수 있습니다. /). 그 '오버 플로우'속성은 존재하지 않습니다. 우리가 말하는 속성은 오버플로 - 랩 (overflow-wrap) 또는 워드 랩 (word-wrap)으로 대체됩니다. 당신은 당신의 근원을 제공 할 수 있습니까? – albertedevigo

나는 여기에서 읽었다 http://www.impressivewebs.com/new-css3-text-wrap/ – unidha

그냥 TD에 추가 을 고정하거나 어떤

.is-breakable { 
    word-break: break-word; 
}

출처

2016-05-25 08:37:58

그만큼 간단합니다. –

당신은 CSS를 아래에 사용할 수 있습니다. 그러면 텍스트가 줄 바꿈되어 텍스트 끝에 ... 적용됩니다.

This_is_a_large_text 당신은 또한 전체 텍스트 값을 표시하는 도구 설명을 추가 할 수 있습니다

td { 
    max-width: 120px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

... This_is_a_lar로 변경됩니다.

<td data-toggle="tooltip" title="${text}">${text}</td>

출처

2017-06-08 08:29:51

Internet Explorer에서 작동하는 이러한 솔루션에 문제가 있습니다.

나는 마침내 작동하게하려면 다음 스타일을 사용했습니다. 줄 바꿈이 depreceated되고 어딘가에 읽을

<td style="word-break: break-all">

출처

2017-10-01 10:38:33

부트 스트랩 테이블이 확장되지 않은 긴 텍스트로 넘침

답변

관련 문제