Hướng dẫn how to break a long word in css - cách ngắt một từ dài trong css

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Thuộc tính

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

Trong ví dụ dưới đây, chúng ta có thể tạo

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

.element {
  word-break: break-all;
}

Nếu sau đó chúng ta đặt chiều rộng của văn bản thành một

 -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 văn bản Cài đặt bút theo chiều dọc với Word-break bởi CSS-Tricks (@CSS-Tricks) trên CodePen.

Giá trị này thường được sử dụng ở những nơi có nội dung do người dùng tạo ra để các chuỗi dài không có nguy cơ phá vỡ bố cục. Một ví dụ rất phổ biến là một bản sao dài và URL dán. Nếu URL đó không có dấu gạch nối, nó có thể vượt ra ngoài hộp cha mẹ và trông xấu hoặc tệ hơn, gây ra các vấn đề về bố cục.

Xem các liên kết sửa bút với Word-break bằng CSS-Tricks (@CSS-Tricks) trên CodePen.

Giá trị

•  -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;

  5: Sử dụng các quy tắc mặc định để phá vỡ từ.

•  -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;

  6: Bất kỳ từ/chữ cái nào cũng có thể đột nhập vào dòng tiếp theo.

•  -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;

  7: Đối với các từ văn bản Trung Quốc, Nhật Bản và tiếng Hàn không bị phá vỡ. Nếu không, điều này giống như

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

  5.

Tài sản này cũng thường được sử dụng cùng với thuộc tính Hyphens để khi nghỉ xảy ra, một sự cường điệu được chèn, theo tiêu chuẩn trong sách.

Việc sử dụng đầy đủ, với các tiền tố nhà cung cấp cần thiết, là:

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

Sử dụng các thuộc tính này trên bộ chọn phổ quát có thể hữu ích nếu bạn có một trang web có nhiều nội dung do người dùng tạo. Mặc dù cảnh báo công bằng, nó có thể trông kỳ lạ trên các tiêu đề và văn bản được định dạng sẵn (

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

).

• overflow-wrap
• Bạch cầu
• white-space
• Xử lý các từ và url dài

Hỗ trợ trình duyệt

Máy tính để bàn

Di động / máy tính bảng

Safari và iOS hỗ trợ giá trị

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

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

Tôi có một tình huống có thể có những từ dài như 'Hellowordsometext' hoặc số nguyên như '1234567891122' mà không có bất kỳ không gian nào ở giữa. Vui lòng kiểm tra JS này. http://jsfiddle.net/rzq5e/6/

Làm thế nào có thể chia nó vào dòng tiếp theo sau khi nó đạt đến chiều rộng div. Điều xảy ra bây giờ là, nó kéo dài ra cùng với div

Solutionforentprise

Benmorel

32.9K48 Huy hiệu vàng173 Huy hiệu bạc 306 Huy hiệu đồng48 gold badges173 silver badges306 bronze badges

Hỏi ngày 5 tháng 9 năm 2013 lúc 4:56Sep 5, 2013 at 4:56

Những gì bạn cần là

).

).

Thử nghiệm

div {
   width: 20px;
   word-wrap: break-word;
}

Đã trả lời ngày 5 tháng 9 năm 2013 lúc 4:57Sep 5, 2013 at 4:57

Ông Alienmr. Người ngoài hành tinhMr. Alien

150K33 Huy hiệu vàng289 Huy hiệu bạc273 Huy hiệu Đồng33 gold badges289 silver badges273 bronze badges

1

Các câu trả lời khác có một số vấn đề với các trình duyệt cũ, như trước Chrome 32.

Tốt hơn là sử dụng mã này:

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

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

Bạn cũng có thể thêm một dấu gạch nối trong đó từ bị hỏng (nếu được hỗ trợ):

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

Nguồn

.c1 {
   width: 200px;
   border: 1px solid;

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

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

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.

Đã trả lời ngày 1 tháng 1 năm 2019 lúc 8:21Jan 1, 2019 at 8:21

MoradnejadmoradnejadMoradnejad

3.2172 Huy hiệu vàng26 Huy hiệu bạc51 Huy hiệu Đồng2 gold badges26 silver badges51 bronze badges

đưa ID hoặc lớp học cho div của bạn

sau đó

#divid
{
width: 30px;
word-wrap: break-word;
}

Word-wrap được hỗ trợ trong IE 5.5+, Firefox 3.5+ và các trình duyệt WebKit như Chrome và Safari, Opera 10.5+.

Đã trả lời ngày 5 tháng 9 năm 2013 lúc 5:02Sep 5, 2013 at 5:02

4

Như thế này

THỬ NGHIỆM

CSS

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

Đã trả lời ngày 5 tháng 9 năm 2013 lúc 5:12Sep 5, 2013 at 5:12

Falguni Panchalfalguni PanchalFalguni Panchal

8.8173 Huy hiệu vàng26 Huy hiệu bạc33 Huy hiệu Đồng3 gold badges26 silver badges33 bronze badges

Khắc phục kích thước của div và áp dụng 'Overflow: Hidden' vì vậy nó sẽ không ảnh hưởng đến kích thước lưới một NA.

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

Bạn có cần xem toàn bộ văn bản?

Đã trả lời ngày 5 tháng 9 năm 2013 lúc 5:02Sep 5, 2013 at 5:02

0

Làm thế nào để bạn phá vỡ một văn bản dài trong CSS?

Làm thế nào để bạn chia từ trong CSS?

Làm thế nào để bạn phá vỡ một từ dài trong TD CSS?

Làm thế nào để bạn phá vỡ một từ mà không có khoảng trống trong CSS?