긴 공백 텍스트로 넘쳐나는 부트 스트랩 테이블

긴 공백 텍스트로 넘쳐나는 부트 스트랩 테이블

---

저는 Bootstrap을 사용하고 있는데 몇 개의 열이있는 테이블이 있는데 마지막 열에는 공백없이 긴 텍스트가있는 경우가 있습니다. 특정 화면 크기에서 테이블이 상위 div를 오버플로하고 형제 테이블과 겹치는보기 흉하게 만드는 것을 발견했습니다.

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

보시다시피 가장 왼쪽 상단의 표는 잘 작동하며 더 많은 텍스트를 수용 할 수 있도록 세로로 단순히 커집니다. 그러나 왼쪽 아래 테이블은 긴 공백이없는 텍스트로 인해 오른쪽에 오버플로가 발생하고 왼쪽 아래 테이블의 오른쪽 열은 형제 "아래"로 이어집니다.

아주 긴 텍스트가 잘 리거나 부분적으로 새 줄로 분할되도록이 문제를 해결할 수있는 방법에 대한 팁이 있습니까?

---

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

더 이상 사용되지 않음 (즉, 자동 줄 바꿈)

다음 스타일을 귀하의 <table>

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

그런 다음 원하는대로 CSS를 통해 레이아웃을 조정할 수 있습니다.

---

이것은 테이블 레이아웃을 수정하지 않고 작동합니다.

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

---

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

마침내 작동하도록하기 위해 다음 스타일을 사용했습니다.

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

---

아래 CSS를 사용할 수 있습니다. 이것은 텍스트를 감싸고 텍스트 끝에 ...를 적용합니다.

예를 들어 This_is_a_large_text는 This_is_a_lar로 변경됩니다.

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

전체 텍스트 값을 표시하는 도구 설명을 추가 할 수도 있습니다.

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

---

Albers 대답이 나를 위해 트릭을 했어

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

JS에서 동적으로로드하려면

 $("#"  + tableName ).addClass('the-table'); 

도움이 되었기를 바랍니다 !!

참고 URL : https://stackoverflow.com/questions/12195469/bootstrap-tables-overflowing-with-long-unspaced-text