Làm thế nào để ngăn chặn những từ dài phá vỡ div của tôi?

Kể từ khi chuyển từ bố trí BẢNG sang bố cục DIV, vẫn còn một vấn đề phổ biến:

VẤN ĐỀ : bạn điền DIV của bạn bằng văn bản động và chắc chắn có một từ siêu dài kéo dài qua rìa cột div của bạn và làm cho trang web của bạn trông không chuyên nghiệp.

RETRO-WHINING : Điều này không bao giờ xảy ra với bố trí bảng. Một ô của bảng sẽ luôn mở rộng độc đáo theo chiều rộng của từ dài nhất.

Độ tin cậy : Tôi thấy vấn đề này ngay cả trên các trang web lớn nhất, đặc biệt là trên các trang web của Đức, nơi thậm chí các từ phổ biến như "giới hạn tốc độ" rất dài ("Geschwindigkeitsbegrenzung").

Có ai có một giải pháp khả thi cho việc này?

Dấu gạch nối mềm

Bạn có thể cho các trình duyệt biết nơi chia các từ dài bằng cách chèn dấu gạch nối mềm ( ­):

averyvery­longword

có thể được kết xuất là

averyverylongword

hoặc là

averyvery- từ
dài

Một biểu thức chính quy đẹp có thể đảm bảo bạn sẽ không chèn chúng trừ khi không cần thiết:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

Trình duyệt và công cụ tìm kiếm đủ thông minh để bỏ qua ký tự này khi tìm kiếm văn bản và Chrome và Firefox (chưa thử nghiệm người khác) bỏ qua nó khi sao chép văn bản vào khay nhớ tạm.

<wbr> thành phần

Một tùy chọn khác là tiêm <wbr>, một IE-ism trước đây , hiện có trong HTML5 :

averyvery<wbr>longword

Phá vỡ không có dấu gạch ngang:

từ
dài

Bạn có thể đạt được điều tương tự với ký tự không gian có chiều rộng bằng không ​(hoặc &#x200B).

FYI cũng có CSShyphens: auto được hỗ trợ bởi IE, Firefox và Safari mới nhất ( nhưng hiện tại không phải Chrome ):

div.breaking {
  hyphens: auto;
}

Tuy nhiên, gạch nối đó dựa trên một từ điển gạch nối và nó không được bảo đảm để phá vỡ các từ dài. Nó có thể làm cho văn bản hợp lý đẹp hơn mặc dù.

Giải pháp rên rỉ

<table>cho bố cục là xấu, nhưng display:tabletrên các yếu tố khác là tốt. Nó sẽ kỳ quặc (và co giãn) như các bảng trường học cũ:

div.breaking {
   display: table-cell;
}

overflowvà white-space: pre-wrapcâu trả lời dưới đây cũng tốt

Hai bản sửa lỗi:

1. overflow:scroll - điều này đảm bảo nội dung của bạn có thể được nhìn thấy với chi phí thiết kế (thanh cuộn rất xấu)
2. overflow:hidden- chỉ cần cắt bỏ bất kỳ tràn. Nó có nghĩa là mọi người không thể đọc nội dung mặc dù.

Nếu (trong ví dụ SO) bạn muốn dừng nó chồng lên phần đệm, có lẽ bạn phải tạo một div khác, bên trong phần đệm, để giữ nội dung của bạn.

Chỉnh sửa: Như trạng thái câu trả lời khác, có nhiều phương pháp để cắt bớt các từ, đó là xử lý độ rộng kết xuất ở phía máy khách (không bao giờ thử thực hiện phía máy chủ này vì nó sẽ không bao giờ hoạt động đáng tin cậy, đa nền tảng) JS và chèn các ký tự ngắt hoặc sử dụng các thẻ CSS không tương thích và / hoặc cực kỳ không tương thích ( word-wrap: break-word dường như không hoạt động trong Firefox ).

Bạn sẽ luôn luôn cần một mô tả tràn mặc dù. Nếu div của bạn chứa một phần nội dung kiểu khối quá rộng khác (hình ảnh, bảng, v.v.), bạn sẽ cần tràn để làm cho nó không phá hủy bố cục / thiết kế.

Vì vậy, bằng mọi cách, hãy sử dụng một phương pháp khác (hoặc kết hợp cả hai) nhưng hãy nhớ thêm tràn để bạn bao quát tất cả các trình duyệt.

Chỉnh sửa 2 (để giải quyết bình luận của bạn dưới đây):

Bắt đầu sử dụng thuộc tính CSS overflowkhông hoàn hảo nhưng nó sẽ phá vỡ các thiết kế. Áp dụng overflow:hiddenđầu tiên. Hãy nhớ rằng tràn có thể không phá vỡ phần đệm để lồng divhoặc sử dụng đường viền (bất cứ điều gì tốt nhất cho bạn).

Điều này sẽ ẩn nội dung tràn và do đó bạn có thể mất ý nghĩa. Bạn có thể sử dụng một thanh cuộn (sử dụng overflow:autohoặc overflow:scrollthay vì overflow:hidden) nhưng tùy thuộc vào kích thước của div và thiết kế của bạn, điều này có thể trông không hay hoạt động tốt.

Để khắc phục, chúng ta có thể sử dụng JS để kéo mọi thứ trở lại và thực hiện một số hình thức cắt tự động. Tôi đã đi được nửa chặng đường bằng cách viết ra một số mã giả cho bạn nhưng nó trở nên phức tạp nghiêm trọng về nửa chừng. Nếu bạn cần hiển thị càng nhiều càng tốt, hãy xem dấu gạch nối ( như được đề cập dưới đây ).

Chỉ cần lưu ý rằng điều này đi kèm với chi phí CPU của người dùng. Nó có thể dẫn đến các trang mất nhiều thời gian để tải và / hoặc thay đổi kích thước.

Đây là một vấn đề phức tạp, như chúng ta biết và không được hỗ trợ theo bất kỳ cách phổ biến nào giữa các trình duyệt. Hầu hết các trình duyệt không hỗ trợ tính năng này nguyên bản.

Trong một số công việc được thực hiện với email HTML, trong đó nội dung người dùng đang được sử dụng, nhưng tập lệnh không có sẵn (và thậm chí CSS không được hỗ trợ tốt), bit CSS sau đây trong một trình bao quanh khối nội dung không xác định của bạn ít nhất sẽ giúp ích phần nào:

.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) */
}

Trong trường hợp trình duyệt dựa trên Mozilla, tệp XBL được đề cập ở trên có chứa:

<?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>

Thật không may, Opera 8+ dường như không thích bất kỳ giải pháp nào ở trên, vì vậy JavaScript sẽ phải là giải pháp cho các trình duyệt đó (như Mozilla / Firefox.) Một giải pháp đa trình duyệt khác (JavaScript) bao gồm các phiên bản Opera sau này sẽ sử dụng tập lệnh của Hedger Wang được tìm thấy ở đây: http://www.hedgerwow.com/360/dhtml/css-word-break.html

Các liên kết / suy nghĩ hữu ích khác:

Bập bẹ vô tình »Lưu trữ blog» Mô phỏng gói CSS word cho Mozilla / Firefox
http://blog.stchur.com/2007/02/22/emulation-css-word-wrap-for-mozillafirefox/

[OU] Không có từ nào trong Opera, hiển thị tốt trong IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- người dùng / 2004-tháng 11 / 024468.html

CSS Cross Browser Word Wrap

.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+ */
}

Sử dụng phong cách word-break:break-all;. Tôi biết nó hoạt động trên bàn.

Bạn có nghĩa là, trong các trình duyệt hỗ trợ nó, word-wrap: break-wordkhông hoạt động?

Nếu được bao gồm trong định nghĩa cơ thể của biểu định kiểu , nó sẽ hoạt động trong toàn bộ tài liệu.

Nếu tràn không phải là một giải pháp tốt, chỉ một javascript tùy chỉnh có thể phá vỡ từ dài một cách giả tạo.

Lưu ý: cũng có <wbr>thẻ Word Break này . Điều này cung cấp cho trình duyệt một vị trí nơi nó có thể phân chia dòng. Thật không may, <wbr>thẻ không hoạt động trong tất cả các trình duyệt, chỉ có Firefox và Internet Explorer (và Opera với thủ thuật CSS).

Chỉ cần kiểm tra IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows và Safari:

word-wrap: break-word;

hoạt động cho các liên kết dài bên trong div với chiều rộng được đặt và không bị tràn được khai báo trong css:

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

Tôi không thấy bất kỳ vấn đề không tương thích

Tôi chỉ tìm hiểu về hyphenator từ câu hỏi này . Điều đó có thể giải quyết vấn đề.

Sau nhiều trận đánh, đây là điều làm việc cho tôi:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Hoạt động trong các phiên bản mới nhất của Chrome, Firefox và Opera.

Lưu ý rằng tôi đã loại trừ nhiều white-spacethuộc tính mà những người khác đề xuất - điều đó thực sự đã phá vỡ prevết lõm cho tôi.

Đối với tôi trên div không có kích thước cố định và với nội dung động, nó hoạt động bằng cách sử dụng:

display:table;
word-break:break-all;

Re regex trong bình luận này , nó tốt, nhưng nó chỉ thêm dấu gạch nối nhút nhát giữa các nhóm 5 ký tự không phải khoảng trắng hoặc dấu gạch nối. Điều đó cho phép nhóm cuối cùng dài hơn nhiều so với dự định, vì không có nhóm phù hợp nào sau đó.

Chẳng hạn, cái này:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

... kết quả trong việc này:

abcde­12345678901234

Đây là phiên bản sử dụng giao diện tích cực để tránh vấn đề đó:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

... Với kết quả này:

abcde­12345­67890­1234

Giải pháp tôi thường sử dụng cho vấn đề này là đặt 2 quy tắc css khác nhau cho IE và các trình duyệt khác:

word-wrap: break-word;

woks hoàn hảo trong IE, nhưng bao bọc từ không phải là một thuộc tính CSS tiêu chuẩn. Đây là một tài sản cụ thể của Microsoft và không hoạt động trong Firefox.

Đối với Firefox, điều tốt nhất để sử dụng chỉ CSS là đặt quy tắc

overflow: hidden;

cho phần tử có chứa văn bản bạn muốn bọc. Nó không bao bọc văn bản, nhưng ẩn phần văn bản vượt quá giới hạn của vùng chứa . Nó có thể là một giải pháp tốt nếu bạn không cần thiết để hiển thị tất cả văn bản (nghĩa là nếu văn bản nằm trong <a>thẻ)

Cập nhật: Xử lý việc này trong CSS rất đơn giản và chi phí thấp, nhưng bạn không có quyền kiểm soát nơi xảy ra sự cố khi chúng xảy ra. Điều đó tốt nếu bạn không quan tâm, hoặc dữ liệu của bạn có các chữ số dài chạy mà không có bất kỳ ngắt tự nhiên nào. Chúng tôi có rất nhiều đường dẫn tệp dài, URL và số điện thoại, tất cả đều có những vị trí tốt hơn đáng kể để phá vỡ hơn những nơi khác.

Giải pháp của chúng tôi trước tiên là sử dụng thay thế regex để đặt một không gian có độ rộng bằng không (& # 8203;) sau mỗi 15 ký tự (không nói) không có khoảng trắng hoặc một trong các ký tự đặc biệt mà chúng tôi muốn ngắt. Sau đó, chúng tôi thực hiện một thay thế khác để đặt một không gian có độ rộng bằng 0 sau các ký tự đặc biệt đó.

Không gian có chiều rộng bằng không là tốt, bởi vì chúng không bao giờ hiển thị trên màn hình; hyphens nhút nhát đã gây nhầm lẫn khi họ cho thấy, bởi vì dữ liệu có dấu gạch ngang đáng kể. Không gian có chiều rộng bằng không cũng không được bao gồm khi bạn sao chép văn bản ra khỏi trình duyệt.

Các ký tự ngắt đặc biệt mà chúng tôi hiện đang sử dụng là dấu chấm, dấu gạch chéo, dấu gạch chéo ngược, dấu phẩy, dấu gạch dưới, @, | và dấu gạch nối. Bạn sẽ không nghĩ mình cần làm gì để khuyến khích phá vỡ sau các dấu gạch nối, nhưng Firefox (ít nhất là 3.6 và 4) không tự phá vỡ tại các dấu gạch nối được bao quanh bởi các số (như số điện thoại).

Chúng tôi cũng muốn kiểm soát số lượng ký tự giữa các lần ngắt nhân tạo, dựa trên không gian bố trí có sẵn. Điều đó có nghĩa là regex để phù hợp với các bước chạy không phá vỡ dài cần phải năng động. Điều này được gọi rất nhiều và chúng tôi không muốn tạo ra cùng một biểu thức chính xác giống nhau vì lý do hiệu suất, vì vậy chúng tôi đã sử dụng bộ đệm regex đơn giản, được khóa bởi biểu thức regex và cờ của nó.

Đây là mã; bạn có thể không gian tên các chức năng trong một gói tiện ích:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

Kiểm tra như thế này:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

Cập nhật 2: Trên thực tế, có vẻ như các không gian có độ rộng bằng không được bao gồm trong văn bản được sao chép trong ít nhất một số trường hợp, bạn không thể nhìn thấy chúng. Rõ ràng, khuyến khích mọi người sao chép văn bản có các ký tự ẩn trong đó là một lời mời để có dữ liệu như được nhập vào các chương trình hoặc hệ thống khác, thậm chí là của chính bạn, nơi nó có thể gây ra sự cố. Chẳng hạn, nếu nó kết thúc trong cơ sở dữ liệu, các tìm kiếm đối với nó có thể thất bại và các chuỗi tìm kiếm như thế này cũng có khả năng thất bại. Sử dụng các phím mũi tên để di chuyển qua dữ liệu như thế này đòi hỏi (phải) một phím nhấn bổ sung để di chuyển qua ký tự mà bạn không thể nhìn thấy, hơi kỳ quái cho người dùng nếu họ nhận thấy.

Trong một hệ thống khép kín, bạn có thể lọc ký tự đó ra khỏi đầu vào để tự bảo vệ mình, nhưng điều đó không giúp ích gì cho các chương trình và hệ thống khác.

Tất cả đã nói, kỹ thuật này hoạt động tốt, nhưng tôi không chắc sự lựa chọn tốt nhất của nhân vật gây đột phá sẽ là gì.

Cập nhật 3: Việc nhân vật này kết thúc dữ liệu không còn là một khả năng lý thuyết, đó là một vấn đề được quan sát. Người dùng gửi dữ liệu được sao chép khỏi màn hình, nó được lưu trong db, ngắt tìm kiếm, mọi thứ sắp xếp một cách kỳ lạ, v.v.

Chúng tôi đã làm hai điều:

1. Đã viết một tiện ích để xóa chúng khỏi tất cả các cột của tất cả các bảng trong tất cả các nguồn dữ liệu cho ứng dụng này.
2. Đã thêm tính năng lọc để xóa nó vào bộ xử lý đầu vào chuỗi tiêu chuẩn của chúng tôi, do đó, sẽ đến lúc bất kỳ mã nào nhìn thấy nó.

Điều này hoạt động tốt, cũng như kỹ thuật, nhưng nó là một câu chuyện cảnh báo.

Cập nhật 4: Chúng tôi đang sử dụng điều này trong bối cảnh dữ liệu được cung cấp cho điều này có thể được thoát HTML. Trong trường hợp phù hợp, nó có thể chèn khoảng trắng có độ rộng bằng không vào giữa các thực thể HTML, với kết quả thú vị.

Cách khắc phục là thêm dấu và vào danh sách các ký tự mà chúng ta không ngắt, như thế này:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

Cần thiết lập "bố trí bảng: cố định để cho gói từ hoạt động

HYPHENATOR là câu trả lời đúng (được nêu ở trên). Vấn đề thực sự đằng sau câu hỏi của bạn là các trình duyệt web vẫn còn (trong năm 2008) cực kỳ nguyên thủy rằng chúng không có tính năng gạch nối. Hãy nhìn xem, chúng ta vẫn đang bắt đầu sử dụng máy tính - chúng ta phải kiên nhẫn. Miễn là các nhà thiết kế thống trị thế giới web, chúng ta sẽ có một khoảng thời gian khó khăn để chờ đợi một số tính năng mới thực sự hữu ích.

CẬP NHẬT: Kể từ tháng 12 năm 2011, chúng tôi hiện có một tùy chọn khác, với sự hỗ trợ mới nổi của các thẻ này trong FF và Safari:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Tôi đã thực hiện một số thử nghiệm cơ bản và có vẻ như nó hoạt động trên phiên bản Mobile Safari và Safari 5.1.1 gần đây.

Bảng tương thích: https://developer.mozilla.org/en/CSS/hyphens#AutoCompabilitiesTable

Để tương thích với IE 8+, hãy sử dụng:

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Xem tại đây http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Tất cả những gì tôi phải làm là áp dụng điều này cho kiểu dáng của div container với chiều rộng được đặt.

Dùng cái này

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

Nếu bạn có cái này -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

chỉ cần chuyển sang định dạng dọc có chứa div và sử dụng chiều rộng tối thiểu trong CSS của bạn thay vì chiều rộng -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

Tất nhiên, nếu bạn đang hiển thị dữ liệu dạng bảng chính hãng thì có thể sử dụng bảng thực vì nó đúng về mặt ngữ nghĩa và sẽ thông báo cho mọi người sử dụng trình đọc màn hình được cho là nằm trong bảng. Nó đang sử dụng chúng để bố trí chung hoặc cắt ảnh mà mọi người sẽ làm bạn thất vọng.

Tôi đã phải làm như sau bởi vì, nếu các thuộc tính không được khai báo theo đúng thứ tự, nó sẽ ngẫu nhiên ngắt các từ ở sai vị trí và không thêm dấu gạch nối.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

Nguyên văn bởi Enigmo: https://stackoverflow.com/a/14191114

Vâng, nếu có thể, thiết lập độ rộng tuyệt đối và cài đặt overflow : autohoạt động tốt.

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

"word-quấn: break-word" hoạt động trong Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/

Thêm phần này vào cssdiv của bạn:word-wrap: break-word;

sau khi tất cả các từ kết thúc tốt đẹp và phá vỡ, bảo toàn tràn của bạn và xem nếu điều này giải quyết vấn đề của bạn. chỉ cần thay đổi màn hình div của bạn thành:display: inline;

Một hàm đơn giản (yêu cầu underscore.js) - dựa trên câu trả lời @yyeL

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

Tôi đã viết một hàm hoạt động tuyệt vời khi nó chèn ­các chữ cái x vào từ để ngắt dòng tốt. Tất cả các câu trả lời ở đây không hỗ trợ tất cả các trình duyệt và thiết bị nhưng điều này hoạt động tốt khi sử dụng PHP:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}