Ngắt từ ở css ký tự cụ thể

Chúc một ngày tốt lành, mọi người. Trong bài đăng này, chúng ta sẽ xem xét cách tìm giải pháp cho thách thức lập trình có tiêu đề Css Cut Text Of

p{
  word-wrap: break-word;
}

Để giải quyết vấn đề tương tự như Css Cut Text Of, bạn cũng có thể sử dụng phương pháp được thảo luận sâu hơn ở trang này, cùng với một số mẫu mã

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

Chúng tôi đã trình bày rất nhiều ví dụ minh họa để cho thấy cách giải quyết vấn đề Css Cut Text Of và chúng tôi cũng đã giải thích cách thực hiện

Làm thế nào để bạn cắt văn bản trong CSS?

Cách cắt bỏ tràn văn bản bằng dấu ba chấm

• P{
• khoảng trắng. cái bọc;
• tràn ra. ẩn giấu;
• tràn văn bản. dấu chấm lửng;
• }

Làm cách nào để cắt ngắn văn bản?

Tạo một hàm truncate(str, maxlength) để kiểm tra độ dài của str và, nếu nó vượt quá maxlength – thay thế phần cuối của str bằng ký tự dấu chấm lửng "…" , để làm cho độ dài của nó bằng maxlength. Kết quả của hàm phải là chuỗi bị cắt ngắn (nếu cần)

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

Thuộc tính ngắt từ trong CSS được sử dụng để chỉ định cách ngắt hoặc tách một từ khi đến cuối dòng. Thuộc tính word-wrap được sử dụng để tách/ngắt các từ dài và ngắt chúng sang dòng tiếp theo. phá vỡ từ. phá vỡ tất cả; . 12-Feb-2019

Làm cách nào để bạn ngừng tràn văn bản trong CSS?

Cách ngăn cuộn tràn trong CSS

• Chiều rộng khung nhìn tối đa
• lưới CSS
• Không gói với Flexbox
• Sử dụng hình ảnh không có chiều rộng tối đa

Làm cách nào để hiển thị một nửa văn bản trong HTML?

Thẻ xác định văn bản chỉ số trên. Văn bản chỉ số trên xuất hiện một nửa ký tự phía trên dòng bình thường và đôi khi được hiển thị bằng phông chữ nhỏ hơn

Làm thế nào để bạn cắt văn bản trong HTML?

, U+2026 HORIZONTAL ELLIPSIS ) để biểu thị văn bản được cắt bớt. Dấu chấm lửng được hiển thị bên trong khu vực nội dung, làm giảm lượng văn bản được hiển thị. Nếu không đủ chỗ để hiển thị dấu chấm lửng, nó sẽ bị cắt bớt. Theto được sử dụng để đại diện cho văn bản được cắt bớt. 26-Tháng 9-2022

Cắt ngắn có nghĩa là gì?

1. để rút ngắn bằng hoặc như thể bằng cách cắt bỏ. 2. để thay thế (một cạnh hoặc một góc của tinh thể) bằng một mặt phẳng. cắt bớt

Làm cách nào để bạn cắt ngắn một đoạn văn thành 100 ký tự trong HTML?

text_truncate = function(str, length, end) { if (length == null) { length = 100; . chiều dài > chiều dài) { return str. chuỗi con(0, độ dài - kết thúc. chiều dài) + kết thúc; . 19-Aug-2022

Làm cho một trang web phản hồi để nó hiển thị chính xác trên tất cả các thiết bị là rất quan trọng trong thời đại ngày nay. Thật không may, bất chấp những nỗ lực tốt nhất của bạn để làm như vậy, bạn vẫn có thể bị hỏng bố cục

Bố cục bị hỏng đôi khi xảy ra do một số từ quá dài để vừa với vùng chứa của chúng. Tràn nội dung có thể xảy ra khi bạn đang xử lý nội dung do người dùng tạo mà bạn không có quyền kiểm soát, chẳng hạn như phần nhận xét của bài đăng trên blog. Do đó, bạn cần áp dụng kiểu dáng để ngăn nội dung tràn vào vùng chứa của chúng

Sử dụng thuộc tính CSS .my-element{ overflow-wrap: anywhere; } 5, .my-element{ overflow-wrap: anywhere; } 6 và .my-element{ overflow-wrap: normal; } 0

Bạn có thể sử dụng các thuộc tính CSS

.my-element{
   overflow-wrap: anywhere;
}

5,

.my-element{
   overflow-wrap: anywhere;
}

6 hoặc

.my-element{
    overflow-wrap: normal;
}

0 để ngắt dòng hoặc ngắt các từ có thể làm tràn vùng chứa của chúng. Bài viết này là một hướng dẫn chuyên sâu về các thuộc tính CSS

.my-element{
   overflow-wrap: anywhere;
}

5,

.my-element{
   overflow-wrap: anywhere;
}

6 và

.my-element{
    overflow-wrap: normal;
}

0 và cách bạn có thể sử dụng chúng để ngăn nội dung tràn làm hỏng bố cục đẹp mắt của bạn

Trước khi chúng tôi bắt đầu, hãy cho chúng tôi hiểu cách trình duyệt bọc nội dung trong phần tiếp theo

Làm thế nào để gói nội dung xảy ra trong trình duyệt?

Trình duyệt và các tác nhân người dùng khác thực hiện gói nội dung tại các điểm dừng được phép, được gọi là cơ hội "bọc mềm". Trình duyệt sẽ bọc nội dung ở cơ hội bọc mềm, nếu có, để giảm thiểu tràn nội dung

Trong tiếng Anh và hầu hết các hệ thống chữ viết tương tự, các cơ hội ngắt dòng mềm xuất hiện theo mặc định tại các ranh giới từ khi không có dấu gạch nối. Bởi vì các từ bị ràng buộc bởi dấu cách và dấu chấm câu, đó là nơi xảy ra kết thúc mềm

Mặc dù các kết thúc mềm xảy ra trong các ký tự khoảng trắng trong các văn bản tiếng Anh, nhưng tình huống có thể khác đối với các hệ thống chữ viết không phải tiếng Anh. Một số ngôn ngữ không sử dụng khoảng trắng để phân tách các từ, nghĩa là việc ngắt dòng nội dung phụ thuộc vào ngôn ngữ hoặc hệ thống chữ viết. Giá trị của thuộc tính

.my-element{
   overflow-wrap: anywhere;
}

0 mà bạn chỉ định trên phần tử

.my-element{
   overflow-wrap: anywhere;
}

1 chủ yếu được sử dụng để xác định hệ thống ngôn ngữ nào đang được sử dụng

Bài viết này sẽ tập trung chủ yếu vào hệ thống chữ viết tiếng Anh. Gói mặc định tại các cơ hội bọc mềm có thể không đủ nếu bạn đang xử lý văn bản dài, liên tục, chẳng hạn như URL hoặc nội dung do người dùng tạo mà bạn có rất ít hoặc không có quyền kiểm soát

Trước khi đi vào giải thích chi tiết về các thuộc tính CSS này, chúng ta hãy xem xét sự khác biệt giữa ngắt dòng mềm và ngắt dòng bắt buộc trong phần bên dưới

Sự khác biệt giữa ngắt quấn mềm và ngắt dòng lực là gì?

Bất kỳ dòng văn bản nào xảy ra ở cơ hội ngắt dòng mềm được gọi là ngắt dòng mềm. Để gói xảy ra ở cơ hội bọc mềm, bạn cần đảm bảo rằng bạn đã bật tính năng gói. Ví dụ: đặt giá trị của thuộc tính CSS

.my-element{
   overflow-wrap: anywhere;
}

2 thành

.my-element{
   overflow-wrap: anywhere;
}

3 sẽ tắt gói

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

Ngắt dòng bắt buộc là do các điều khiển ngắt dòng rõ ràng hoặc ngắt dòng đánh dấu phần cuối hoặc phần đầu của khối văn bản

Thuộc tính CSS .my-element{ overflow-wrap: anywhere; } 4 và .my-element{ overflow-wrap: anywhere; } 6

Tên

.my-element{
   overflow-wrap: anywhere;
}

5 là tên kế thừa của thuộc tính CSS

.my-element{
   overflow-wrap: anywhere;
}

6.

.my-element{
   overflow-wrap: anywhere;
}

4 ban đầu là một tiện ích mở rộng không có tiền tố của Microsoft. Nó không phải là một phần của tiêu chuẩn CSS, mặc dù hầu hết các trình duyệt đã triển khai nó với tên

.my-element{
   overflow-wrap: anywhere;
}

5. Theo thông số kỹ thuật CSS3 dự thảo, các trình duyệt nên coi

.my-element{
   overflow-wrap: anywhere;
}

5 là bí danh tên kế thừa của thuộc tính

.my-element{
   overflow-wrap: anywhere;
}

6 để tương thích

Hầu hết các phiên bản gần đây của các trình duyệt web phổ biến đã triển khai thuộc tính

.my-element{
   overflow-wrap: anywhere;
}

6

Dưới đây là thông số kỹ thuật CSS3 dự thảo nói về thuộc tính

.my-element{
   overflow-wrap: anywhere;
}

6

Thuộc tính này chỉ định liệu trình duyệt có thể ngắt tại các điểm không được phép trong một dòng hay không để tránh tràn khi một chuỗi không thể ngắt quá dài để vừa trong hộp dòng

Nếu bạn có thuộc tính

.my-element{
   overflow-wrap: anywhere;
}

2 trên một phần tử, bạn cần đặt giá trị của thuộc tính đó để cho phép gói cho

.my-element{
   overflow-wrap: anywhere;
}

6 có tác dụng

Dưới đây là các giá trị của tài sản

.my-element{
   overflow-wrap: anywhere;
}

6. Bạn cũng có thể sử dụng các giá trị toàn cầu

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

27,

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

28,

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

29 và

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

50 với

.my-element{
   overflow-wrap: anywhere;
}

6, nhưng chúng tôi sẽ không đề cập đến chúng ở đây

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

6

Trong các phần phụ bên dưới, chúng ta sẽ xem xét các giá trị của thuộc tính CSS

.my-element{
   overflow-wrap: anywhere;
}

6 được nêu ở trên để hiểu hành vi của thuộc tính này

word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; 53 trong CSS

Áp dụng giá trị

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

54 sẽ khiến trình duyệt sử dụng hành vi ngắt dòng mặc định của hệ thống. Do đó, đối với tiếng Anh và các hệ thống chữ viết có liên quan khác, ngắt dòng sẽ xảy ra ở khoảng trắng và dấu gạch nối

.my-element{
    overflow-wrap: normal;
}

Trong hình bên dưới, có một từ trong văn bản dài hơn từ chứa nó. Bởi vì không có cơ hội bao bọc mềm trong đó và giá trị của thuộc tính

.my-element{
   overflow-wrap: anywhere;
}

6 là

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

54, từ tràn ra vùng chứa của nó. Nó mô tả hành vi ngắt dòng mặc định của hệ thống

---

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

---

word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; 57

Sử dụng giá trị

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

58 sẽ phá vỡ một chuỗi không thể phá vỡ tại các điểm tùy ý giữa hai ký tự. Nó sẽ không chèn ký tự gạch nối ngay cả khi bạn áp dụng thuộc tính

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

59 trên cùng một phần tử

Trình duyệt sẽ chỉ ngắt từ nếu hiển thị từ trên dòng của nó sẽ gây tràn. Nếu từ vẫn bị tràn khi được đặt trên dòng của nó, nó sẽ ngắt từ tại điểm mà nếu không sẽ xảy ra tràn

Khi bạn sử dụng

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

58, trình duyệt sẽ xem xét các cơ hội bọc mềm do từ ngắt giới thiệu khi tính toán kích thước nội tại của

.my-element{
    overflow-wrap: normal;
}

51

.my-element{
   overflow-wrap: anywhere;
}

Không giống như trong phần trước, nơi chúng tôi sử dụng

.my-element{
    overflow-wrap: normal;
}

52, trong hình bên dưới, chúng tôi đang sử dụng

.my-element{
    overflow-wrap: normal;
}

53. Từ tràn mà không thể phá vỡ được chia thành các đoạn văn bản bằng cách sử dụng

.my-element{
    overflow-wrap: normal;
}

53 để nó nằm gọn trong vùng chứa của nó

Điều quan trọng cần lưu ý là một số trình duyệt chưa hỗ trợ

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

58. Hình ảnh bên dưới hiển thị hỗ trợ trình duyệt theo caniuse. com. Không sử dụng

.my-element{
    overflow-wrap: normal;
}

53 trong sản xuất nếu bạn muốn hỗ trợ trình duyệt cao hơn

.my-element{ overflow-wrap: normal; } 57

Giá trị

.my-element{
    overflow-wrap: normal;
}

58 giống như

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

58 về chức năng. Nếu trình duyệt có thể bọc từ tràn vào dòng của nó mà không bị tràn, đó là những gì nó sẽ làm

Tuy nhiên, nếu từ vẫn tràn bộ chứa của nó ngay cả khi nó ở trên dòng của nó, trình duyệt sẽ ngắt nó tại điểm mà nếu không sẽ xảy ra tràn

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

2

Hình ảnh dưới đây cho thấy cách trình duyệt ngắt văn bản tràn trong phần trước khi bạn áp dụng

.my-element{
    overflow-wrap: normal;
}

60. Lưu ý rằng hình ảnh bên dưới xuất hiện giống như hình ảnh trong tiểu mục cuối cùng. Sự khác biệt giữa

.my-element{
    overflow-wrap: normal;
}

53 và

.my-element{
    overflow-wrap: normal;
}

60 là ở cách tính kích thước nội tại của

.my-element{
    overflow-wrap: normal;
}

51

Sự khác biệt giữa

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

58 và

.my-element{
    overflow-wrap: normal;
}

58 là rõ ràng khi tính kích thước nội tại của

.my-element{
    overflow-wrap: normal;
}

51. Với

.my-element{
    overflow-wrap: normal;
}

58, trình duyệt không xem xét các cơ hội bọc mềm do từ ngắt giới thiệu khi tính kích thước nội tại của

.my-element{
    overflow-wrap: normal;
}

51, nhưng với

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

58 thì có. Để biết thêm về kích thước nội tại tối thiểu, bạn có thể đọc bài viết này

Giá trị

.my-element{
    overflow-wrap: normal;
}

58 có phạm vi phù hợp trong số các phiên bản mới nhất của trình duyệt máy tính để bàn. Thật không may, bạn không thể nói như vậy về đối tác di động của họ. Do đó, sẽ an toàn hơn khi sử dụng

.my-element{
    overflow-wrap: normal;
}

71 kế thừa thay vì

.my-element{
    overflow-wrap: normal;
}

60 gần đây hơn

Hình ảnh dưới đây cho thấy trình duyệt hỗ trợ cho

.my-element{
    overflow-wrap: normal;
}

60 theo caniuse. com. Các phiên bản mới nhất của trình duyệt máy tính để bàn có hỗ trợ trong khi hỗ trợ cho một số trình duyệt di động không xác định

Thuộc tính CSS của .my-element{ overflow-wrap: normal; } 74

.my-element{
    overflow-wrap: normal;
}

74 là một thuộc tính CSS khác mà bạn có thể sử dụng để chỉ định cơ hội ngắt dòng mềm giữa các ký tự. Bạn có thể sử dụng thuộc tính này để ngắt một từ tại vị trí chính xác nơi xảy ra tràn và bọc nó vào dòng sau

Dưới đây là thông số kỹ thuật CSS3 dự thảo nói về thuộc tính CSS

.my-element{
    overflow-wrap: normal;
}

0

Thuộc tính này chỉ định cơ hội bọc mềm giữa các chữ cái, i. e. , trong đó nó là "bình thường" và được phép ngắt dòng văn bản. Nó kiểm soát các loại chữ cái mà trình duyệt có thể kết hợp với nhau để tạo thành các “từ” không thể phá vỡ - khiến các ký tự CJK hoạt động giống như văn bản không phải CJK hoặc ngược lại

Dưới đây là các giá trị có thể có của thuộc tính CSS

.my-element{
    overflow-wrap: normal;
}

0. Giống như

.my-element{
   overflow-wrap: anywhere;
}

6, bạn cũng có thể sử dụng các giá trị toàn cầu

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

27,

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

28,

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

29 và

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

50 với

.my-element{
    overflow-wrap: normal;
}

0, nhưng chúng tôi sẽ không đề cập đến chúng ở đây

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

5

.my-element{
    overflow-wrap: normal;
}

57 cũng là một giá trị của thuộc tính CSS

.my-element{
    overflow-wrap: normal;
}

0, mặc dù thuộc tính này không được dùng nữa. Tuy nhiên, các trình duyệt vẫn hỗ trợ nó vì lý do cũ. Chỉ định thuộc tính này có tác dụng tương tự như

.my-element{
   overflow-wrap: anywhere;
}

56 và

.my-element{
    overflow-wrap: normal;
}

53

Bây giờ chúng ta đã biết thuộc tính CSS

.my-element{
    overflow-wrap: normal;
}

58 và các giá trị tương ứng của nó, chúng ta hãy xem xét chúng trong các phần phụ bên dưới

Đang đặt .my-element{ overflow-wrap: normal; } 0 thành word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; 53

Đặt giá trị của thuộc tính

.my-element{
    overflow-wrap: normal;
}

0 thành

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

54 sẽ áp dụng quy tắc ngắt từ mặc định

.my-element{
    overflow-wrap: normal;
}

5

Hình ảnh dưới đây minh họa điều gì sẽ xảy ra khi bạn áp dụng kiểu dáng

.my-element{
   overflow-wrap: anywhere;
}

56 cho một khối văn bản chứa một từ dài hơn vùng chứa của nó. Những gì bạn thấy là các quy tắc phá vỡ từ thông thường của trình duyệt đang có hiệu lực

.my-element{ overflow-wrap: anywhere; } 64

Giá trị

.my-element{
   overflow-wrap: anywhere;
}

65 sẽ chèn ngắt dòng tại điểm chính xác mà văn bản sẽ tràn ra ngoài đối với các hệ thống chữ viết không phải tiếng Trung, tiếng Nhật và tiếng Hàn

Nó sẽ không đặt từ đó vào dòng riêng của nó, ngay cả khi làm như vậy sẽ không cần phải chèn dấu ngắt dòng

.my-element{
    overflow-wrap: normal;
}

6

Trong hình ảnh bên dưới, tôi đã áp dụng kiểu dáng ________ 966 cho phần tử ________ 967 có chiều rộng

.my-element{
   overflow-wrap: anywhere;
}

68 chứa văn bản tràn. Trình duyệt đã chèn ngắt dòng tại điểm sẽ xảy ra tràn dòng và bao phần văn bản còn lại xuống dòng tiếp theo

Sử dụng

.my-element{
   overflow-wrap: anywhere;
}

65 sẽ ngắt một từ giữa hai ký tự tại điểm chính xác nơi xảy ra lỗi tràn trong tiếng Anh và các hệ thống ngôn ngữ liên quan khác. Tuy nhiên, nó sẽ không áp dụng hành vi tương tự cho các văn bản tiếng Trung, tiếng Nhật và tiếng Hàn (CJK)

Nó không áp dụng hành vi tương tự cho các văn bản CJK vì hệ thống chữ viết của CJK có các quy tắc riêng để áp dụng các điểm dừng. Tạo ngắt dòng giữa hai ký tự một cách tùy ý chỉ vì mục đích tránh tràn có thể thay đổi đáng kể ý nghĩa tổng thể của văn bản. Đối với các hệ thống CJK, trình duyệt sẽ áp dụng ngắt dòng tại điểm cho phép ngắt dòng đó

.my-element{ overflow-wrap: normal; } 00

Nếu bạn sử dụng giá trị

.my-element{
    overflow-wrap: normal;
}

01, trình duyệt sẽ không áp dụng ngắt từ cho văn bản CJK ngay cả khi nội dung bị tràn. Tác động của việc áp dụng giá trị

.my-element{
    overflow-wrap: normal;
}

01 giống như tác động của

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

54 đối với các hệ thống chữ viết không phải của CJK

.my-element{
    overflow-wrap: normal;
}

7

Trong hình ảnh bên dưới, áp dụng

.my-element{
    overflow-wrap: normal;
}

04 có tác dụng tương tự như

.my-element{
   overflow-wrap: anywhere;
}

56 vì tôi đang sử dụng hệ thống chữ viết không phải CJK (tiếng Anh)

Hình ảnh dưới đây cho thấy trình duyệt hỗ trợ cho

.my-element{
    overflow-wrap: normal;
}

04 theo caniuse. com. Giá trị này có hỗ trợ trong hầu hết các trình duyệt máy tính để bàn phổ biến. Thật không may, đó không phải là trường hợp của trình duyệt di động

Bây giờ chúng ta đã xem xét các thuộc tính CSS của

.my-element{
   overflow-wrap: anywhere;
}

6 và

.my-element{
    overflow-wrap: normal;
}

0, sự khác biệt giữa hai thuộc tính này là gì?

Sự khác biệt giữa .my-element{ overflow-wrap: anywhere; } 6 và .my-element{ overflow-wrap: normal; } 0 là gì?

Bạn có thể sử dụng các thuộc tính CSS

.my-element{
   overflow-wrap: anywhere;
}

6 và

.my-element{
    overflow-wrap: normal;
}

0 để quản lý tràn nội dung. Tuy nhiên, có sự khác biệt trong cách hai thuộc tính xử lý nó

Sử dụng

.my-element{
   overflow-wrap: anywhere;
}

6 sẽ bọc toàn bộ từ tràn vào dòng của nó nếu nó có thể nằm gọn trong một dòng mà không làm tràn bộ chứa của nó. Trình duyệt sẽ ngắt từ chỉ khi nó không thể đặt nó trên một dòng mới mà không bị tràn. Trong hầu hết các trường hợp, thuộc tính

.my-element{
   overflow-wrap: anywhere;
}

6 hoặc tên kế thừa của nó là

.my-element{
   overflow-wrap: anywhere;
}

5 có thể quản lý tràn nội dung

Thuộc tính

.my-element{
   overflow-wrap: anywhere;
}

6 tương đối mới do đó có hỗ trợ trình duyệt hạn chế. Thay vào đó, bạn có thể sử dụng tên kế thừa

.my-element{
   overflow-wrap: anywhere;
}

5 nếu muốn hỗ trợ trình duyệt cao hơn. Sử dụng

.my-element{
    overflow-wrap: normal;
}

71 sẽ bọc từ tràn vào một dòng mới và tiếp tục ngắt từ đó giữa hai ký tự nếu từ đó vẫn tràn vào vùng chứa của nó

.my-element{
    overflow-wrap: normal;
}

74 sẽ ngắt một cách tàn nhẫn từ tràn giữa hai ký tự ngay cả khi việc đặt nó trên dòng của nó sẽ phủ nhận nhu cầu ngắt từ. Một số hệ thống viết, như hệ thống viết CJK, có các quy tắc ngắt từ nghiêm ngặt mà trình duyệt sẽ xem xét khi tạo ngắt dòng bằng cách sử dụng

.my-element{
    overflow-wrap: normal;
}

0

Khắc phục sự cố tràn nội dung CSS với Chrome DevTools

Thông thường, bạn có thể cần sửa các bố cục bị hỏng do tràn nội dung, vì các giao diện người dùng phức tạp hiện đang phổ biến trong quá trình phát triển giao diện người dùng. Các trình duyệt web hiện đại đi kèm với các công cụ để khắc phục sự cố bố cục như vậy, chẳng hạn như Chrome DevTools

Nó cung cấp khả năng chọn một phần tử trong cây DOM để bạn có thể xem, thêm và xóa các khai báo CSS, v.v. Nó sẽ giúp bạn theo dõi kiểu CSS vi phạm trong bố cục của bạn và sửa nó một cách dễ dàng

Để mở Chrome DevTools, bạn có thể sử dụng

.my-element{
    overflow-wrap: normal;
}

21. Khi mở ra, nó trông giống như trong hình bên dưới. Chọn một phần tử trong cây DOM sẽ hiển thị các kiểu CSS tương ứng của nó. Bạn có thể sửa đổi các kiểu và xem hiệu ứng trên bố cục của mình khi bạn truy tìm nguồn gốc của lỗi

Như đã đề cập, nếu bạn có thuộc tính khoảng trắng trên một phần tử, hãy đặt giá trị của nó để cho phép gói cho

.my-element{
    overflow-wrap: normal;
}

53 hoặc

.my-element{
    overflow-wrap: normal;
}

60 hoạt động

Đặt giá trị của thuộc tính

.my-element{
   overflow-wrap: anywhere;
}

6 thành

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

58 hoặc

.my-element{
    overflow-wrap: normal;
}

58 trên nội dung

.my-element{
    overflow-wrap: normal;
}

27 sẽ không phá vỡ một từ tràn như trong các ví dụ trên. Bảng sẽ làm tràn vùng chứa của nó và tạo cuộn ngang nếu cần

Để bảng vừa với vùng chứa của nó và

.my-element{
   overflow-wrap: anywhere;
}

6 hoạt động, hãy đặt giá trị của thuộc tính

.my-element{
    overflow-wrap: normal;
}

29 thành

.my-element{
    overflow-wrap: normal;
}

30 và đặt chiều rộng của bảng thành

.my-element{
    overflow-wrap: normal;
}

31 hoặc một số giá trị cố định

Sự kết luận

Như đã chỉ ra trong các phần trên,

.my-element{
   overflow-wrap: anywhere;
}

6 và

.my-element{
    overflow-wrap: normal;
}

0 giống nhau ở nhiều điểm. Bạn có thể sử dụng cả hai để điều khiển ngắt dòng

Tên

.my-element{
   overflow-wrap: anywhere;
}

6 là bí danh của tài sản kế thừa

.my-element{
   overflow-wrap: anywhere;
}

5. Do đó, bạn có thể sử dụng cả hai thay thế cho nhau. Tuy nhiên, điều đáng nói là trình duyệt hỗ trợ cho thuộc tính

.my-element{
   overflow-wrap: anywhere;
}

6 mới hơn vẫn còn thấp. Bạn nên sử dụng

.my-element{
   overflow-wrap: anywhere;
}

5 thay vì

.my-element{
   overflow-wrap: anywhere;
}

6 nếu bạn muốn hỗ trợ trình duyệt gần như phổ biến. Theo thông số kỹ thuật CSS3 dự thảo, các trình duyệt và tác nhân người dùng nên tiếp tục hỗ trợ

.my-element{
   overflow-wrap: anywhere;
}

5 vì các lý do cũ

Nếu bạn đang tìm cách quản lý tràn nội dung, thì

.my-element{
   overflow-wrap: anywhere;
}

6 hoặc tên kế thừa của nó là

.my-element{
   overflow-wrap: anywhere;
}

5 có thể là đủ

Bạn cũng có thể sử dụng

.my-element{
    overflow-wrap: normal;
}

0 để ngắt một từ giữa hai ký tự nếu từ đó làm tràn vùng chứa của nó. Cũng giống như

.my-element{
   overflow-wrap: anywhere;
}

6, bạn cần thận trọng khi sử dụng

.my-element{
    overflow-wrap: normal;
}

0 vì những hạn chế trong hỗ trợ trình duyệt

Bây giờ bạn đã biết hành vi được liên kết với hai thuộc tính, bạn có thể quyết định vị trí và thời điểm sử dụng chúng. Tôi đã bỏ lỡ bất cứ điều gì? . Tôi sẽ vui lòng cập nhật bài viết này

Giao diện người dùng của bạn có ngốn CPU của người dùng không?

Khi giao diện người dùng web ngày càng phức tạp, các tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất cả người dùng của bạn trong sản xuất, hãy thử LogRocket. https. // tên lửa. com/đăng ký/

LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các chỉ số hiệu suất chính của giao diện người dùng, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, ghi nhật ký yêu cầu mạng và tự động hiển thị tất cả các lỗi