우리가 알고 있듯이 이것은 복잡한 문제이며 브라우저간에 일반적인 방식으로 지원되지 않습니다. 대부분의 브라우저는이 기능을 기본적으로 지원하지 않습니다.

사용자 콘텐츠가 사용되었지만 HTML을 지원하지 않는 HTML 전자 메일을 사용한 일부 작업에서 간격이없는 콘텐츠 블록 주위의 래퍼에있는 다음 CSS 비트는 적어도 어느 정도 도움이 될 것입니다.

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

Mozilla 기반 브라우저의 경우 위에서 언급 한 XBL 파일에는 다음이 포함됩니다.

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

불행히도 Opera 8+는 위의 솔루션을 좋아하지 않는 것 같습니다. 따라서 JavaScript는 Mozilla / Firefox와 같은 브라우저에 대한 솔루션이어야합니다. Opera의 최신 버전을 포함하는 또 다른 크로스 브라우저 솔루션 (JavaScript) Hedger Wang의 스크립트를 사용하는 것이 좋습니다 :
http://www.hedgerwow.com/360/dhtml/css-word-break.html

다른 유용한 링크 / 생각 :

불일치 한 Babble»블로그 아카이브»Mozilla / Firefox 용 CSS 자동 줄 바꿈
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] Opera에서 줄 바꿈 없음, IE에서 잘 표시됨
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- users / 2004-November / 024468.html

답변

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

word-wrap: break-word;

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}