표 내에서 "단어 줄 바꿈 : 구분 단어"사용

표 내에서 "단어 줄 바꿈 : 구분 단어"사용

---

중복 가능성 :
html 테이블에서 줄 바꿈

이 텍스트는 Google 크롬 (및 기타 최신 브라우저)에서 원하는 방식으로 정확하게 작동합니다.

<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
  <p>
    aaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </p>
</div>

1. 브라우저가 충분히 넓 으면 a +와 b +가 같은 줄에 있습니다.

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   

2. 브라우저 범위를 좁 히면 a +와 b +가 별도의 줄에 표시됩니다.

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   

3. b +가 더 이상 맞지 않을 때는 끊어져서 두 줄 (총 세 줄)에 놓입니다.

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbb
   bbbbbbbb
   

모두 훌륭합니다.

그러나 내 상황에서는 이것은 a가 div아니라 a입니다 table.

<table style="border:1px solid black; width:100%; word-wrap:break-word;">
  <tr>
    <td>
      <p>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </p>
    </td>
  </tr>
</table>

이 경우 # 1과 # 2가 발생하지만 # 3은 발생하지 않습니다. 즉, 2 단계와 3 단계가 발생하지 않으면 테이블 축소가 중지됩니다. 브레이크 워드가 필터링되지 않는 것 같습니다.

3 번이 어떻게 일어나는지 아는 사람 있나요? 이 솔루션은 Chrome에서만 작동해야하지만 더 나은 다른 브라우저에서도 작동했습니다.

추신 : "테이블을 사용하지 마십시오"는 도움이되지 않습니다.

---

table-layout: fixed 셀이 테이블에 맞도록 강제합니다 (다른 방법은 아님). 예 :

<table style="border: 1px solid black; width: 100%; word-wrap:break-word;
              table-layout: fixed;">
  <tr>
    <td>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    </td>
  </tr>
</table>

---

이것을 시도 할 수 있습니다.

td p {word-break:break-all;}

그러나 이렇게하면 <br>태그 를 추가하지 않는 한 충분한 공간이있을 때 다음과 같이 표시됩니다 .

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

그래서 <br>가능하다면 줄 바꿈이있는 곳에 태그를 추가하는 것이 좋습니다 .

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

http://jsfiddle.net/LLyH3/3/

또한이 방법으로 문제가 해결되지 않으면 여기에 유사한 스레드가 있습니다 .

참고 URL : https://stackoverflow.com/questions/5889508/using-word-wrap-break-word-within-a-table