Trong CSS, nếu bạn có một chuỗi không thể ngắt, chẳng hạn như một từ rất dài, theo mặc định, nó sẽ làm tràn bất kỳ vùng chứa nào quá nhỏ đối với nó theo hướng nội tuyến. Chúng ta có thể thấy điều này xảy ra trong ví dụ dưới đây. từ dài đang kéo dài qua ranh giới của hộp nó được chứa trong
CSS sẽ hiển thị tràn theo cách này, vì nếu làm khác có thể gây mất dữ liệu. Trong CSS mất dữ liệu có nghĩa là một số nội dung của bạn biến mất. Vì vậy, giá trị ban đầu của overflow
là visible
và chúng ta có thể thấy văn bản tràn. Nói chung là có thể xem tràn ra ngoài dù có lộn xộn cũng tốt hơn. Nếu mọi thứ biến mất hoặc bị cắt xén như sẽ xảy ra nếu overflow
được đặt thành hidden
, bạn có thể không phát hiện ra điều đó khi xem trước trang web của mình. Tràn đầy lộn xộn ít nhất là dễ phát hiện và trong trường hợp xấu nhất, khách truy cập của bạn sẽ có thể xem và đọc nội dung ngay cả khi nội dung đó trông hơi lạ
Trong ví dụ tiếp theo này, bạn có thể thấy điều gì sẽ xảy ra nếu overflow
được đặt thành hidden
Để tìm kích thước tối thiểu của hộp sẽ chứa nội dung của nó mà không bị tràn, hãy đặt thuộc tính width
hoặc inline-size
của hộp thành min-content
Do đó, sử dụng min-content
là một khả năng cho các hộp tràn. Nếu có thể cho phép hộp phát triển thành kích thước tối thiểu cần thiết cho nội dung, nhưng không lớn hơn, sử dụng từ khóa này sẽ cung cấp cho bạn kích thước đó
Nếu hộp cần có kích thước cố định hoặc bạn muốn đảm bảo rằng các từ dài không thể tràn ra ngoài, thì thuộc tính visible
0 có thể trợ giúp. Thuộc tính này sẽ ngắt một từ khi nó quá dài để tự nó nằm trên một dòng
Ghi chú. Tài sản visible
0 hoạt động giống như tài sản không chuẩn visible
2. Thuộc tính visible
2 hiện được các trình duyệt coi là bí danh của thuộc tính tiêu chuẩn
Một tài sản thay thế để thử là visible
4. Thuộc tính này sẽ ngắt từ tại điểm nó tràn. Nó sẽ gây ra sự hòa vốn nếu việc đặt từ lên một dòng mới sẽ cho phép nó hiển thị mà không bị vỡ
Trong ví dụ tiếp theo này, bạn có thể so sánh sự khác biệt giữa hai thuộc tính trên cùng một chuỗi văn bản
Điều này có thể hữu ích nếu bạn muốn ngăn khoảng cách lớn xuất hiện nếu chỉ có đủ khoảng trống cho chuỗi. Hoặc, khi có một yếu tố khác mà bạn không muốn sự gián đoạn xảy ra ngay sau đó
Trong ví dụ dưới đây có một hộp kiểm và nhãn. Giả sử, bạn muốn nhãn bị hỏng nếu nó quá dài so với hộp. Tuy nhiên, bạn không muốn nó bị hỏng ngay sau hộp kiểm
Để thêm dấu gạch nối khi các từ bị hỏng, hãy sử dụng thuộc tính CSS visible
5. Sử dụng giá trị của visible
6, trình duyệt có thể tự động ngắt các từ tại các điểm gạch nối thích hợp, tuân theo bất kỳ quy tắc nào mà trình duyệt chọn. Để kiểm soát quy trình, hãy sử dụng giá trị visible
7, sau đó chèn ký tự ngắt cứng hoặc ngắt mềm vào chuỗi. Phá vỡ khó khăn [visible
8] sẽ luôn phá vỡ, ngay cả khi không cần thiết phải làm như vậy. Phá vỡ mềm [visible
9] chỉ phá vỡ nếu cần phá vỡ
Bạn cũng có thể sử dụng thuộc tính overflow
0 để sử dụng chuỗi bạn chọn thay vì ký tự gạch nối ở cuối dòng [trước dấu ngắt dòng gạch nối]
Thuộc tính này cũng nhận giá trị visible
6, giá trị này sẽ chọn đúng giá trị để đánh dấu ngắt dòng ở giữa từ theo quy ước đánh máy của ngôn ngữ nội dung hiện tại
Nếu bạn biết nơi bạn muốn ngắt một chuỗi dài, thì bạn cũng có thể chèn phần tử HTML overflow
2. Điều này có thể hữu ích trong các trường hợp như hiển thị một URL dài trên một trang. Sau đó, bạn có thể thêm thuộc tính để ngắt chuỗi ở những vị trí hợp lý giúp dễ đọc hơn
Thuộc tính CSS white-space
kiểm soát cách xử lý văn bản trên phần tử mà nó được áp dụng cho. Giả sử bạn có HTML chính xác như thế này
A bunch of words you see.
Bạn đã tạo kiểu cho div để có chiều rộng được đặt là 100px. Với kích thước phông chữ hợp lý, đó là quá nhiều văn bản để phù hợp với 100px
. Nếu không làm bất cứ điều gì, giá trị white-space
mặc định là normal
và văn bản sẽ ngắt dòng. Xem ví dụ bên dưới hoặc làm theo ở nhà với bản demo
div {
/* This is the default, you don't need to
explicitly declare it unless overriding
another declaration */
white-space: normal;
}
Nếu bạn muốn ngăn văn bản bị ngắt dòng, bạn có thể áp dụng white-space: nowrap;
Lưu ý trong ví dụ về mã HTML ở đầu bài viết này, thực tế có hai ngắt dòng, một ngắt dòng trước và một ngắt dòng sau, cho phép văn bản nằm trên một dòng riêng [trong mã]. Khi văn bản hiển thị trong trình duyệt, các ngắt dòng đó xuất hiện như thể chúng bị loại bỏ. Cũng loại bỏ các khoảng trắng thừa trên dòng trước chữ cái đầu tiên. Nếu chúng tôi muốn buộc trình duyệt hiển thị các ngắt dòng đó và các ký tự khoảng trắng thừa, chúng tôi có thể sử dụng white-space: pre;
Nó được gọi là pre
bởi vì hành vi giống như thể bạn đã bọc văn bản trong các thẻ [theo mặc định sẽ xử lý khoảng trắng và ngắt dòng theo cách đó]. Khoảng trắng được tôn trọng chính xác như trong HTML và văn bản không ngắt dòng cho đến khi có dấu ngắt dòng trong mã. Điều này đặc biệt hữu ích khi hiển thị mã theo nghĩa đen, mang lại lợi ích về mặt thẩm mỹ từ một số định dạng [và đôi khi là cực kỳ quan trọng, như trong các ngôn ngữ phụ thuộc vào khoảng trắng. ]
Có lẽ bạn thích cách pre
tôn vinh khoảng trắng và dấu ngắt, nhưng bạn cần văn bản được bao bọc thay vì có khả năng thoát ra khỏi vùng chứa chính của nó. Đó là những gì
div {
/* This is the default, you don't need to
explicitly declare it unless overriding
another declaration */
white-space: normal;
}
1 dành choCuối cùng,
div {
/* This is the default, you don't need to
explicitly declare it unless overriding
another declaration */
white-space: normal;
}
2 sẽ ngắt các dòng mà chúng ngắt mã, nhưng khoảng trắng thừa vẫn bị xóaThật thú vị, ngắt dòng cuối cùng không được tôn trọng. Theo “Các dòng bị ngắt ở các ký tự dòng mới được giữ nguyên và khi cần thiết để điền vào các hộp dòng. ” vì vậy có lẽ điều đó có ý nghĩa
Đây là một bảng để hiểu các hành vi của tất cả các giá trị khác nhau
New linesSpaces and tabsText wrappingnormal
CollapseCollapseWrappre
PreservePreserveNo wrapdiv {
/* This is the default, you don't need to
explicitly declare it unless overriding
another declaration */
white-space: normal;
}
5CollapseCollapseNo wrapdiv {
/* This is the default, you don't need to
explicitly declare it unless overriding
another declaration */
white-space: normal;
}
6PreservePreserveWrapdiv {
/* This is the default, you don't need to
explicitly declare it unless overriding
another declaration */
white-space: normal;
}
7PreserveCollapseWrap, thuộc tính white-space
theo đúng nghĩa đen sẽ đi theo biểu đồ đó và ánh xạ thuộc tính tới
div {
/* This is the default, you don't need to
explicitly declare it unless overriding
another declaration */
white-space: normal;
}
9 và white-space
0 tương ứng