Làm thế nào để bạn buộc bọc văn bản trong css?

Bạn có thể ngắt một chuỗi dài, không có bất kỳ ký tự khoảng trắng nào bằng cách sử dụng thuộc tính CSS word-wrap hoặc overflow-wrap nếu bạn sử dụng CSS3

Trong đoạn mã này, bạn sẽ tìm thấy một số ví dụ về các phần tử khối, cũng như các phần tử nội tuyến

Trong ví dụ bên dưới, chúng tôi đặt thuộc tính word-wrap thành giá trị "break-word" cho phần tử và chỉ định chiều rộng của phần tử. Ngoài ra, chúng tôi đặt thuộc tính hiển thị thành “inline-block”

Hãy nói về những cách khác nhau mà chúng ta có thể kiểm soát cách văn bản xuống dòng (hoặc không xuống dòng) trên một trang web. CSS cung cấp cho chúng ta rất nhiều công cụ để đảm bảo văn bản của chúng ta chạy theo cách chúng ta muốn, nhưng chúng ta cũng sẽ đề cập đến một số thủ thuật sử dụng HTML và các ký tự đặc biệt

Bố cục bảo vệ

Thông thường, văn bản sẽ chuyển sang dòng tiếp theo tại “cơ hội ngắt dòng mềm”, đây là một cái tên ưa thích cho những vị trí mà bạn muốn văn bản ngắt một cách tự nhiên, chẳng hạn như giữa các từ hoặc sau dấu gạch nối. Nhưng đôi khi bạn có thể thấy mình có những đoạn văn bản dài không có cơ hội ngắt dòng mềm, chẳng hạn như các từ hoặc URL thực sự dài. Điều này có thể gây ra tất cả các loại vấn đề về bố cục. Ví dụ: văn bản có thể tràn vào vùng chứa của nó hoặc nó có thể buộc vùng chứa trở nên quá rộng và đẩy mọi thứ ra khỏi vị trí

Mã hóa phòng thủ tốt để dự đoán các sự cố do văn bản không bị hỏng. May mắn thay, CSS cung cấp cho chúng tôi một số công cụ cho việc này

Lấy tràn văn bản để ngắt dòng

Đặt

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

4 trên một phần tử sẽ cho phép văn bản ngắt giữa từ nếu cần. Trước tiên, nó sẽ cố gắng giữ cho một từ không bị ngắt quãng bằng cách chuyển từ đó sang dòng tiếp theo, nhưng sau đó sẽ ngắt từ nếu vẫn không đủ chỗ

Xem Pen tràn-bọc. break-word của Will Boyd (@lonekorean) trên CodePen

Ngoài ra còn có

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

5, ngắt từ theo cách tương tự. Sự khác biệt là cách nó ảnh hưởng đến phép tính kích thước

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

6 của phần tử mà nó bật. Khá dễ dàng nhận thấy khi

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

7 được đặt thành

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

6

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

Xem Pen tràn-quấn + nội dung tối thiểu của Will Boyd (@lonekorean) trên CodePen

Phần tử trên cùng với

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

4 tính toán

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

6 như thể không có từ nào bị hỏng, vì vậy chiều rộng của nó trở thành chiều rộng của từ dài nhất. Phần tử dưới cùng với

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

5 tính toán

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

6 với tất cả các dấu ngắt mà nó có thể tạo. Vì việc ngắt quãng có thể xảy ra, à, ở bất kỳ đâu,

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

6 cuối cùng sẽ có chiều rộng của một ký tự

Hãy nhớ rằng, hành vi này chỉ phát huy tác dụng khi có sự tham gia của

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

6. Nếu chúng tôi đã đặt

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

7 thành một số giá trị cố định, chúng tôi sẽ thấy cùng một kết quả phá vỡ từ cho cả hai

Phá Lời Không Thương Xót

Một lựa chọn khác để phá vỡ các từ là

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

36. Cái này thậm chí sẽ không cố gắng giữ cho các từ nguyên vẹn - nó sẽ phá vỡ chúng ngay lập tức. Hãy xem

Xem cách giải nghĩa bằng bút. break-all của Will Boyd (@lonekorean) trên CodePen

Lưu ý cách từ dài không được chuyển sang dòng tiếp theo, giống như khi sử dụng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

37. Ngoài ra, hãy chú ý cách "từ" bị hỏng, mặc dù nó sẽ vừa vặn ở dòng tiếp theo

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

36 không có vấn đề gì trong việc ngắt từ, nhưng nó vẫn thận trọng về dấu câu. Ví dụ: nó sẽ tránh bắt đầu một dòng với dấu chấm từ cuối câu. Nếu bạn muốn phá vỡ thực sự tàn nhẫn, ngay cả với dấu chấm câu, hãy sử dụng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

39

Xem cách giải nghĩa bằng bút. ngắt tất cả so với ngắt dòng. mọi nơi bởi Will Boyd (@lonekorean) trên CodePen

Xem cách

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

36 di chuyển chữ “k” xuống để tránh bắt đầu dòng thứ hai bằng “. ”?

dấu câu thừa

Hãy xem cách các thuộc tính CSS mà chúng ta đã đề cập cho đến nay xử lý các khoảng thời gian dài quá mức của dấu câu

Xem Bút viết thừa dấu câu của Will Boyd (@lonekorean) trên CodePen

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

4 và

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

39 có thể giữ mọi thứ được chứa, nhưng sau đó,

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

36 lại có dấu câu kỳ lạ — lần này dẫn đến văn bản bị tràn

Đó là điều cần ghi nhớ. Nếu bạn hoàn toàn không muốn văn bản tràn ngập, hãy lưu ý rằng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

36 sẽ không dừng dấu chấm câu

Chỉ định nơi từ có thể phá vỡ

Để kiểm soát nhiều hơn, bạn có thể chèn các cơ hội ngắt từ vào văn bản của mình theo cách thủ công bằng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

36. Bạn cũng có thể sử dụng "không gian có chiều rộng bằng 0", được cung cấp bởi thực thể HTML

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

37 (vâng, nó phải được viết hoa như bạn thấy. )

Hãy xem những điều này hoạt động như thế nào bằng cách bao bọc một URL dài mà thông thường sẽ không bao bọc mà chỉ bao bọc giữa các phân đoạn

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

Xem Hướng dẫn sử dụng bút Cơ hội ngắt từ của Will Boyd (@lonekorean) trên CodePen

gạch nối tự động

Bạn có thể yêu cầu trình duyệt ngắt và gạch nối các từ khi thích hợp bằng cách sử dụng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

38. Quy tắc gạch nối được xác định theo ngôn ngữ, vì vậy bạn sẽ cần cho trình duyệt biết ngôn ngữ nào sẽ sử dụng. Điều này được thực hiện bằng cách chỉ định thuộc tính

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

39 trong HTML, có thể trực tiếp trên phần tử có liên quan hoặc trên

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

80

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

3____23

Xem Dấu gạch nối bút. tự động bởi Will Boyd (@lonekorean) trên CodePen

gạch nối thủ công

Bạn cũng có thể tự giải quyết vấn đề và chèn “dấu gạch nối mềm” theo cách thủ công với thực thể HTML

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

81. Nó sẽ không hiển thị trừ khi trình duyệt quyết định bọc ở đó, trong trường hợp đó, dấu gạch nối sẽ xuất hiện. Lưu ý trong bản trình diễn sau đây cách chúng tôi sử dụng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

81 hai lần, nhưng chúng tôi chỉ nhìn thấy nó một lần khi văn bản kết thúc

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

8

Xem Pen Soft Hyphen của Will Boyd (@lonekorean) trên CodePen

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

83 phải được đặt thành

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

84 hoặc

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

85 để

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

81 hiển thị chính xác. Thuận tiện, mặc định là

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

87, vì vậy bạn sẽ ổn mà không cần thêm bất kỳ CSS bổ sung nào (trừ khi có điều gì đó đã khai báo

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

88 vì lý do nào đó)

Ngăn chặn văn bản từ Wrapping

Hãy thay đổi mọi thứ. Có thể đôi khi bạn không muốn văn bản được ngắt dòng tự do để bạn có thể kiểm soát tốt hơn cách trình bày nội dung của mình. Có một vài công cụ để giúp bạn với điều này

Đầu tiên là

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

89. Đặt nó trên một phần tử để ngăn văn bản của nó ngắt dòng một cách tự nhiên

Xem bút khoảng trắng. nowrap của Will Boyd (@lonekorean) trên CodePen

Định dạng trước văn bản

Ngoài ra còn có

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

10, nó sẽ ngắt dòng văn bản giống như khi bạn nhập nó vào HTML của mình. Mặc dù vậy, hãy cẩn thận vì nó cũng sẽ giữ khoảng trống trong HTML của bạn, vì vậy hãy chú ý đến định dạng của bạn. Bạn cũng có thể sử dụng thẻ

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

11 để nhận được kết quả tương tự (theo mặc định, thẻ có

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

10)

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

1

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

5

Xem Văn bản định dạng sẵn bằng bút của Will Boyd (@lonekorean) trên CodePen

Một sự phá vỡ, nơi mà những từ không thể phá vỡ?

Đối với ngắt dòng, bạn có thể sử dụng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

13 bên trong một phần tử với

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

89 hoặc

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

10 đều được. Văn bản sẽ bao bọc

Nhưng điều gì sẽ xảy ra nếu bạn sử dụng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

36 trong một phần tử như vậy? . Chrome/Edge sẽ nhận ra

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

36 và có khả năng bao bọc, trong khi Firefox/Safari thì không

Tuy nhiên, khi nói đến không gian có chiều rộng bằng 0 (

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

37), các trình duyệt nhất quán. Không ai sẽ bọc nó bằng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

89 hoặc

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

10

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

4

Xem bút khoảng trắng. nowrap + break lines của Will Boyd (@lonekorean) trên CodePen

Không gian không phá vỡ

Đôi khi bạn có thể muốn văn bản được ngắt tự do, ngoại trừ ở những nơi rất cụ thể. Tin tốt. Có một số thực thể HTML chuyên dụng cho phép bạn thực hiện chính xác điều này

Một "khoảng trắng không ngắt" (______451) thường được sử dụng để giữ khoảng cách giữa các từ, nhưng không cho phép ngắt dòng giữa chúng

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

6

Xem Pen Non-Breaking Space của Will Boyd (@lonekorean) trên CodePen

Word Joiners và Non-Breaking Hyphens

Văn bản có thể ngắt dòng tự nhiên ngay cả khi không có dấu cách, chẳng hạn như sau dấu gạch nối. Để ngăn gói mà không thêm khoảng trắng, bạn có thể sử dụng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

52 (phân biệt chữ hoa chữ thường. ) để có được một "từ nối". Đối với dấu gạch nối cụ thể, bạn có thể nhận được "dấu gạch nối không ngắt" với

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

53 (nó không có tên thực thể HTML đẹp)

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

9

Xem Pen Word Joiners và Non-Breaking Hyphens của Will Boyd (@lonekorean) trên CodePen

Văn bản CJK và các từ ngắt

Văn bản CJK (tiếng Trung/Nhật/Hàn) hoạt động khác với văn bản không phải CJK theo một số cách. Một số thuộc tính và giá trị CSS nhất định có thể được sử dụng để kiểm soát bổ sung đối với việc gói văn bản CJK một cách cụ thể

Hành vi trình duyệt mặc định cho phép các từ bị phá vỡ trong văn bản CJK. Điều này có nghĩa là

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

54 (mặc định) và

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

36 sẽ cho bạn kết quả giống nhau. Tuy nhiên, bạn có thể sử dụng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

56 để ngăn văn bản CJK nằm trong các từ (văn bản không phải CJK sẽ không bị ảnh hưởng)

Đây là một ví dụ bằng tiếng Hàn. Lưu ý cách từ “자랑스럽게” phá vỡ hoặc không phá vỡ

Xem Văn bản Pen CJK + ngắt từ của Will Boyd (@lonekorean) trên CodePen

Tuy nhiên, hãy cẩn thận, tiếng Trung và tiếng Nhật không sử dụng dấu cách giữa các từ như tiếng Hàn, vì vậy,

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

56 có thể dễ dàng khiến văn bản bị tràn dài nếu không được xử lý theo cách khác

Quy tắc ngắt dòng và văn bản của CJK

Chúng tôi đã nói về

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

39 trước đó với văn bản không phải CJK và làm thế nào nó không gặp vấn đề gì khi ngắt dấu câu. Điều này cũng đúng với văn bản CJK

Đây là một ví dụ bằng tiếng Nhật. Lưu ý cách “。” được phép hoặc không được phép bắt đầu một dòng

Xem Văn bản Pen CJK + ngắt dòng của Will Boyd (@lonekorean) trên CodePen

Có các giá trị khác cho

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

59 ảnh hưởng đến cách kết thúc văn bản CJK.

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

40,

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

41 và

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

42. Các giá trị này hướng dẫn trình duyệt sử dụng quy tắc nào khi quyết định vị trí chèn dấu ngắt dòng. W3C mô tả một số quy tắc và các trình duyệt cũng có thể thêm các quy tắc của riêng họ

Đáng nói. Phần tử tràn

Thuộc tính CSS

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

37 không dành riêng cho văn bản, nhưng thường được sử dụng để đảm bảo văn bản không hiển thị bên ngoài phần tử có chiều rộng hoặc chiều cao bị hạn chế

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

0

Xem Pen Element Overflow của Will Boyd (@lonekorean) trên CodePen

Như bạn có thể thấy, giá trị của

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

84 cho phép nội dung được cuộn (

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

84 chỉ hiển thị thanh cuộn khi cần,

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

46 luôn hiển thị chúng). Giá trị của

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

47 chỉ cần cắt bỏ nội dung và để nguyên ở đó

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

37 thực sự là tốc ký để đặt cả

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

49 và

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

60, cho tràn ngang và dọc tương ứng. Hãy thoải mái sử dụng những gì phù hợp với bạn nhất

Chúng ta có thể xây dựng dựa trên ________ 561 bằng cách thêm ________ 562. Văn bản sẽ vẫn bị cắt nhưng chúng ta sẽ có một số dấu chấm lửng đẹp mắt làm dấu hiệu

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

1

Xem tràn văn bản Pen. dấu chấm lửng của Will Boyd (@lonekorean) trên CodePen

Lừa tiền thưởng. Ngắt dòng phần tử giả

Bạn có thể buộc ngắt dòng trước và/hoặc sau phần tử nội tuyến, trong khi vẫn giữ nó ở dạng phần tử nội tuyến, với một chút thủ thuật phần tử giả

Đầu tiên, đặt

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

63 của phần tử giả

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

64 hoặc

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

65 thành

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

66, điều này sẽ cung cấp cho bạn ký tự dòng mới. Sau đó, đặt

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

10 để đảm bảo ký tự dòng mới được tôn trọng

  
  <p>https://subdomain.somewhere.co.ukp>

  
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.ukp>

  
  <p>https://subdomain​.somewhere​.co​.ukp>

2____03

Xem Dấu ngắt dòng phần tử giả bút của Will Boyd (@lonekorean) trên CodePen

Chúng tôi có thể chỉ cần đặt

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

68 trên

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

69 để có được thời gian nghỉ tương tự, nhưng sau đó nó sẽ không còn là nội tuyến nữa.

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

90 giúp bạn dễ dàng thấy rằng với phương pháp này, chúng ta vẫn có một phần tử nội tuyến

ghi chú tiền thưởng

• Có một thuộc tính CSS cũ hơn có tên là

  .top {
    width: min-content;
    overflow-wrap: break-word;
  }
  
  .bottom {
    width: min-content;
    overflow-wrap: anywhere;
  }

  91. Nó không chuẩn và các trình duyệt hiện coi nó là bí danh của

  .top {
    width: min-content;
    overflow-wrap: break-word;
  }
  
  .bottom {
    width: min-content;
    overflow-wrap: anywhere;
  }

  92
• Thuộc tính CSS

  .top {
    width: min-content;
    overflow-wrap: break-word;
  }
  
  .bottom {
    width: min-content;
    overflow-wrap: anywhere;
  }

  93 có một số giá trị khác mà chúng tôi không đề cập.

  .top {
    width: min-content;
    overflow-wrap: break-word;
  }
  
  .bottom {
    width: min-content;
    overflow-wrap: anywhere;
  }

  94,

  .top {
    width: min-content;
    overflow-wrap: break-word;
  }
  
  .bottom {
    width: min-content;
    overflow-wrap: anywhere;
  }

  95 và

  .top {
    width: min-content;
    overflow-wrap: break-word;
  }
  
  .bottom {
    width: min-content;
    overflow-wrap: anywhere;
  }

  96. Không giống như những cái chúng tôi đã đề cập, những cái này không ngăn được việc gói văn bản
• Thông số mô-đun văn bản CSS cấp 4 mô tả một thuộc tính CSS

  .top {
    width: min-content;
    overflow-wrap: break-word;
  }
  
  .bottom {
    width: min-content;
    overflow-wrap: anywhere;
  }

  97 có vẻ thú vị, nhưng tại thời điểm viết, không có trình duyệt nào triển khai nó

Đã đến lúc “kết thúc” mọi thứ

Có quá nhiều thứ đi vào văn bản trôi chảy trên một trang web. Hầu hết thời gian bạn không thực sự cần phải suy nghĩ về nó, vì các trình duyệt xử lý nó cho bạn. Đối với những lúc bạn cần kiểm soát nhiều hơn, thật tuyệt khi biết rằng bạn có rất nhiều lựa chọn

Viết điều này chắc chắn là một lỗ hổng đối với tôi khi tôi tiếp tục tìm thấy ngày càng nhiều thứ để nói về. Tôi hy vọng tôi đã chỉ cho bạn đủ để văn bản của bạn được ngắt và trôi chảy theo cách bạn muốn