Nếu bạn đặt tràn. ẩn, văn bản sẽ vẫn tràn vào phần đệm. Để khắc phục điều này, bạn có thể tạo một đường viền trong suốt
http. // stackoverflow. com/câu hỏi/7711490/ngăn chặn văn bản-từ-tràn-a-đệm-container-in-html
div {
white-space: nowrap;
overflow: hidden;
max-width: 300px;
border-left:1em solid transparent;
border-right:1em solid transparent;
text-overflow: ellipsis;
}Thuộc tính tràn văn bản trong CSS được sử dụng để xác định rằng một số văn bản đã bị tràn và ẩn khỏi chế độ xem. Thuộc tính khoảng trắng phải được đặt thành nowrap và thuộc tính tràn phải được đặt thành ẩn. Nội dung tràn có thể được cắt bớt, hiển thị dấu chấm lửng ['…'] hoặc hiển thị một chuỗi tùy chỉnh
cú pháp
text-overflow: clip|string|ellipsis|initial|inherit;
Giá trị tài sản. Tất cả các thuộc tính được mô tả tốt với ví dụ dưới đây
kẹp. Văn bản bị cắt bớt và không thể nhìn thấy. Đây là giá trị mặc định
cú pháp
text-overflow: clip;
Thí dụ. Ví dụ này minh họa việc sử dụng thuộc tính tràn văn bản trong đó giá trị của nó được đặt thành kế thừa
Thuộc tính text-overflow trong CSS xử lý các tình huống trong đó văn bản bị cắt bớt khi nó tràn vào hộp của phần tử. Nó có thể được cắt bớt [tôi. e. bị cắt, ẩn], hiển thị dấu chấm lửng ['…', Giá trị Phạm vi Unicode U+2026] hoặc hiển thị chuỗi do tác giả xác định [không có trình duyệt hiện tại nào hỗ trợ chuỗi do tác giả xác định]
.ellipsis {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}Lưu ý rằng text-overflow chỉ xảy ra khi thuộc tính
text-overflow: clip|string|ellipsis|initial|inherit;1 của container có giá trị
text-overflow: clip|string|ellipsis|initial|inherit;2,
text-overflow: clip|string|ellipsis|initial|inherit;3 hoặc
text-overflow: clip|string|ellipsis|initial|inherit;4 và
text-overflow: clip|string|ellipsis|initial|inherit;5
Tràn văn bản chỉ có thể xảy ra trên các phần tử cấp độ khối hoặc khối nội tuyến, bởi vì phần tử cần phải có chiều rộng để được tràn văn bản. Tràn xảy ra theo hướng được xác định bởi thuộc tính direction hoặc các thuộc tính liên quan
Bản trình diễn sau đây hiển thị hành vi của thuộc tính text-overflow bao gồm tất cả các giá trị có thể. Hỗ trợ trình duyệt khác nhau
Check out this Pen!
Đặt
text-overflow: clip|string|ellipsis|initial|inherit;1 thành
text-overflow: clip|string|ellipsis|initial|inherit;3 hoặc
text-overflow: clip|string|ellipsis|initial|inherit;4 sẽ hiển thị thanh cuộn để hiển thị văn bản bổ sung, trong khi
text-overflow: clip|string|ellipsis|initial|inherit;2 thì không. Văn bản ẩn có thể được chọn bằng cách chọn các dấu chấm lửng
đồ cũ
Ẩn nói rằng bạn có thể sử dụng một URL tới một hình ảnh cho dấu chấm lửng, nhưng có vẻ như URL đó đã bị bỏ
Có một cú pháp hai giá trị, e. g.
Check out this Pen!4, điều đó sẽ kiểm soát tràn ở bên trái và bên phải của cùng một vùng chứa. Tôi không chắc làm thế nào điều đó có thể đạt được. Có lẽ văn bản được căn giữa trong một vùng chứa quá nhỏ? . ”
Tôi không chắc
Check out this Pen!5 đến từ đâu. Nó không có trong thông số kỹ thuật hoặc trong bất kỳ tài liệu nào khác ngoài WebPlatform. tổ chức
Thuộc tính text-overflow từng là viết tắt của sự kết hợp giữa
Check out this Pen!7 và
Check out this Pen!8, nhưng không còn nữa và những thuộc tính riêng biệt đó không tồn tại
Thuộc tính text-overflow chỉ định cách báo hiệu nội dung bị tràn không hiển thị cho người dùng. Nó có thể được cắt bớt, hiển thị dấu chấm lửng [. ] hoặc hiển thị một chuỗi tùy chỉnh
Cần có cả hai thuộc tính sau để tràn văn bản
- khoảng trắng. cái bọc;
- tràn ra. ẩn giấu;
Đưa ra bản chạy thử ❯
Giá trị mặc định. clipKế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS3JavaScript. sự vật. Phong cách. textOverflow="dấu chấm lửng" Hãy dùng thử
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính
Các số theo sau -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố
Propertytext-overflow4. 06. 07. 03. 111. 0
9. 0 -o-
Cú pháp CSS
tràn văn bản. kẹp. dấu chấm lửng. sợi dây. ban đầu. thừa kế;
Giá trị tài sản
Giá trịMô tảDemoclipGiá trị mặc định. Văn bản bị cắt bớt và không thể truy cập đượcBản trình diễn ❯dấu chấm lửngHiển thị dấu chấm lửng [". "] để biểu thị văn bản đã cắt bớtDemo ❯stringKết xuất chuỗi đã cho để biểu thị văn bản đã cắt bớtĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế
Tràn là những gì xảy ra khi có quá nhiều nội dung để vừa trong một thùng chứa. Trong hướng dẫn này, bạn sẽ tìm hiểu tràn là gì và cách quản lý nó
Mọi thứ trong CSS là một hộp. Bạn có thể hạn chế kích thước của các hộp này bằng cách gán các giá trị của
text-overflow: clip;3 và
text-overflow: clip;4 [hoặc
text-overflow: clip;5 và
text-overflow: clip;6]. Tràn xảy ra khi có quá nhiều nội dung để vừa trong một hộp. CSS cung cấp nhiều công cụ khác nhau để quản lý tràn. Khi bạn tiến xa hơn với bố cục CSS và viết CSS, bạn sẽ gặp nhiều tình huống tràn hơn
Hãy xem xét hai ví dụ thể hiện hành vi mặc định của CSS khi có tràn
Ví dụ đầu tiên là một hộp đã bị hạn chế bằng cách đặt
text-overflow: clip;4. Sau đó, chúng tôi thêm nội dung vượt quá không gian được phân bổ. Nội dung tràn hộp và rơi vào đoạn bên dưới
Ví dụ thứ hai là một từ trong hộp. Hộp đã được làm quá nhỏ so với từ nên nó bị bung ra khỏi hộp
Bạn có thể thắc mắc tại sao CSS hoạt động theo cách lộn xộn như vậy, hiển thị nội dung bên ngoài vùng chứa dự định của nó. Tại sao không ẩn nội dung tràn?
Bất cứ khi nào có thể, CSS không ẩn nội dung. Điều này sẽ gây mất dữ liệu. Vấn đề mất dữ liệu là bạn có thể không nhận thấy. Khách truy cập trang web có thể không nhận thấy. Nếu nút gửi trên một biểu mẫu biến mất và không ai có thể hoàn thành biểu mẫu, đây có thể là một vấn đề lớn. Thay vào đó, CSS tràn theo những cách có thể nhìn thấy. Bạn có nhiều khả năng thấy có vấn đề. Tệ nhất, khách truy cập trang web sẽ cho bạn biết rằng nội dung đang chồng chéo
Nếu bạn giới hạn một hộp có
text-overflow: clip;3 hoặc
text-overflow: clip;4, thì CSS tin tưởng rằng bạn biết bạn đang làm gì. CSS giả định rằng bạn đang quản lý khả năng tràn. Nói chung, việc hạn chế kích thước khối là vấn đề khi hộp chứa văn bản. Có thể có nhiều văn bản hơn bạn mong đợi khi thiết kế trang web hoặc văn bản có thể lớn hơn [ví dụ: nếu người dùng đã tăng kích thước phông chữ của họ]
Hai bài học tiếp theo giải thích các cách tiếp cận khác nhau để kiểm soát kích thước theo cách ít bị tràn hơn. Tuy nhiên, nếu bạn cần một kích thước cố định, bạn cũng có thể kiểm soát cách hoạt động của tràn. Hãy đọc tiếp
Thuộc tính
text-overflow: clip|string|ellipsis|initial|inherit;1 là cách bạn kiểm soát tràn phần tử. Đó là cách bạn hướng dẫn trình duyệt hoạt động như thế nào. Giá trị mặc định của tràn là
.ellipsis {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}Để cắt nội dung khi nội dung bị tràn, bạn có thể đặt
.ellipsis {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}Thay vào đó, có lẽ bạn muốn thêm thanh cuộn khi tràn nội dung? . Điều này mang lại lợi thế là giữ cho bố cục nhất quán, thay vì các thanh cuộn xuất hiện hoặc biến mất, tùy thuộc vào lượng nội dung trong vùng chứa
Xóa một số nội dung khỏi hộp bên dưới. Lưu ý cách thanh cuộn vẫn còn, ngay cả khi không cần cuộn
Trong ví dụ trên, chúng ta chỉ cần cuộn trên trục
text-overflow: clip;41, tuy nhiên chúng ta nhận được thanh cuộn ở cả hai trục. Để chỉ cuộn trên trục ________ 241, bạn có thể sử dụng thuộc tính ________ 243, đặt ________ 244
Bạn cũng có thể cuộn trên trục x bằng cách sử dụng
text-overflow: clip;45, mặc dù đây không phải là cách được khuyến nghị để chứa các từ dài. Nếu bạn có một từ dài trong một hộp nhỏ, bạn có thể cân nhắc sử dụng thuộc tính
text-overflow: clip;46 hoặc
text-overflow: clip;47. Ngoài ra, một số phương pháp được thảo luận trong Định cỡ các mục trong CSS có thể giúp bạn tạo các hộp có tỷ lệ tốt hơn với lượng nội dung khác nhau
Như với
text-overflow: clip;48, bạn nhận được thanh cuộn trong chiều cuộn cho dù có đủ nội dung để tạo thanh cuộn hay không
Ghi chú. Bạn có thể chỉ định cuộn x và y bằng cách sử dụng thuộc tính
text-overflow: clip|string|ellipsis|initial|inherit;1, chuyển hai giá trị. Nếu hai từ khóa được chỉ định, từ khóa đầu tiên áp dụng cho
text-overflow: clip;45 và từ khóa thứ hai áp dụng cho
text-overflow: clip;43. Mặt khác, cả
text-overflow: clip;45 và
text-overflow: clip;43 đều được đặt thành cùng một giá trị. Ví dụ:
text-overflow: clip;54 sẽ đặt
text-overflow: clip;45 thành
text-overflow: clip;48 và
text-overflow: clip;43 thành
text-overflow: clip;58
Nếu bạn chỉ muốn thanh cuộn xuất hiện khi có nhiều nội dung hơn mức có thể chứa trong hộp, hãy sử dụng
text-overflow: clip;59. Điều này cho phép trình duyệt xác định xem nó có hiển thị thanh cuộn hay không
Trong ví dụ bên dưới, hãy xóa nội dung cho đến khi nội dung vừa với hộp. Bạn sẽ thấy các thanh cuộn biến mất
Khi bạn sử dụng một giá trị tràn, chẳng hạn như
text-overflow: clip;48 hoặc
text-overflow: clip;61, bạn tạo Bối cảnh định dạng khối [BFC]. Nội dung của hộp mà bạn đã thay đổi giá trị của
text-overflow: clip|string|ellipsis|initial|inherit;1 để có bố cục độc lập. Nội dung bên ngoài vùng chứa không thể chọc vào vùng chứa và không có gì có thể lọt ra khỏi vùng chứa đó vào bố cục xung quanh. Điều này cho phép hành vi cuộn, vì tất cả nội dung hộp cần được chứa và không chồng chéo, để tạo trải nghiệm cuộn nhất quán
Các phương thức bố cục hiện đại [được mô tả trong bố cục CSS] quản lý tràn. Chúng chủ yếu hoạt động mà không có giả định hoặc phụ thuộc vào lượng nội dung sẽ có trên một trang web
Điều này không phải lúc nào cũng là tiêu chuẩn. Trước đây, một số địa điểm được xây dựng với các thùng chứa có chiều cao cố định để căn chỉnh đáy hộp. Các hộp này có thể không có mối quan hệ với nhau. Điều này thật mong manh. Trong một ứng dụng cũ, bạn có thể gặp một hộp trong đó nội dung chồng lấp nội dung khác trên trang. Bây giờ bạn có thể nhận ra rằng điều này xảy ra khi tràn. Lý tưởng nhất là bạn sẽ cấu trúc lại bố cục để không dựa vào các thùng chứa có chiều cao cố định
Khi phát triển một trang web, hãy luôn ghi nhớ. Kiểm tra thiết kế với số lượng lớn và nhỏ nội dung. Tăng kích thước phông chữ của văn bản. Nói chung đảm bảo rằng CSS của bạn hoạt động một cách mạnh mẽ. Thay đổi giá trị của tràn để ẩn nội dung hoặc để thêm thanh cuộn, có thể được dành riêng cho một số trường hợp sử dụng được chọn [ví dụ: khi bạn định có hộp cuộn]
Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Tràn ra
Bài học này đã giới thiệu khái niệm tràn. Bạn nên hiểu rằng CSS mặc định tránh ẩn nội dung tràn. Bạn đã phát hiện ra rằng bạn có thể quản lý tình trạng tràn bộ nhớ tiềm ẩn, đồng thời, bạn nên kiểm tra công việc để đảm bảo rằng nó không vô tình gây ra sự cố tràn bộ nhớ