Trình duyệt không thêm bất kỳ phần đệm. Thay vào đó, các chữ cái (ngay cả chữ hoa) thường nhỏ hơn đáng kể theo hướng dọc so với chiều cao của phông chữ, chưa kể độ cao dòng, thường theo mặc định khoảng 1,2 lần chiều cao phông chữ (kích thước phông chữ).
Không có giải pháp chung cho điều này vì phông chữ là khác nhau. Ngay cả đối với kích thước phông chữ cố định, chiều cao của một chữ cái thay đổi theo phông chữ. Và chữ hoa không cần phải có cùng chiều cao trong phông chữ.
Các giải pháp thực tế có thể được tìm thấy bằng thử nghiệm, nhưng chúng không thể tránh khỏi phụ thuộc vào phông chữ. Bạn sẽ cần đặt chiều cao dòng về cơ bản nhỏ hơn kích thước phông chữ. Sau đây dường như mang lại kết quả mong muốn trong các trình duyệt khác nhau trên Windows, cho phông chữ Arial:
span.foo { display: inline-block; font-size: 50px; background-color: green; line-height: 0.75em; font-family: Arial; } span.bar { position: relative; bottom: -0.02em; }<span class=foo><span class=bar>BIG TEXT</span></span>
Các phần tử span lồng nhau được sử dụng để thay thế văn bản theo chiều dọc. Mặt khác, văn bản nằm trên đường cơ sở và dưới đường cơ sở, có chỗ dành riêng cho hậu duệ (như trong các chữ J và y).
Nếu bạn nhìn kỹ (với sự phóng to), bạn sẽ nhận thấy rằng có một khoảng trống rất nhỏ ở trên và bên dưới hầu hết các chữ cái ở đây. Tôi đã thiết lập mọi thứ để chữ cái G G Ga phù hợp. Nó mở rộng theo chiều dọc xa hơn một chút so với các chữ cái chữ hoa khác vì theo cách đó các chữ cái trông giống nhau về chiều cao. Có những vấn đề tương tự với các chữ cái khác, như & nbsp; Và bạn cần phải điều chỉnh các cài đặt nếu bạn sẽ cần chữ cái Q Q vì nó có một bộ giảm tốc kéo dài một chút dưới mức cơ sở (trong Arial). Và tất nhiên, nếu bạn sẽ cần phải có é, hoặc hầu như bất kỳ dấu hiệu nào, bạn sẽ gặp rắc rối.
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 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. Hãy nói rằng bạn có HTML chính xác như thế này:
<div> A bunch of words you see. </div>Bạn đã tạo kiểu cho div để có chiều rộng được thiết lập là 100px. Ở kích thước phông chữ hợp lý, đó là quá nhiều văn bản để phù hợp với 100px. 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ẽ kết thúc. Xem ví dụ dưới đây hoặc theo dõi tại 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 kết thúc, bạn có thể áp dụng white-space: nowrap;If you want to prevent the text from wrapping, you can apply white-space: nowrap;
Thông báo trong ví dụ mã HTML ở đầu bài viết này, thực tế có hai lần ngắt dòng, một lần trước dòng văn bản và một lần sau, cho phép văn bản nằm trên dòng riêng của nó (trong mã). Khi văn bản hiển thị trong trình duyệt, những dòng đó bị vỡ xuất hiện như thể chúng bị loại bỏ. Cũng bị tước bỏ là các không gian bổ sung trên dòng trước chữ cái đầu tiên. Nếu chúng ta muốn buộc trình duyệt hiển thị các lỗi dòng đó và các ký tự không gian trắng, chúng ta có thể sử dụng ____1010
Nó được gọi là <span class=foo><span class=bar>BIG TEXT</span></span>1 bởi vì hành vi là như thể bạn đã quấn văn bản trong các thẻ <span class=foo><span class=bar>BIG TEXT</span></span>2 (theo mặc định, xử lý không gian trắng và dòng phá vỡ theo cách đó). Không gian trắng được tôn vinh chính xác như trong HTML và văn bản không kết thúc cho đến khi có một dòng ngắt 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à hoàn toàn quan trọng, như trong các ngôn ngữ phụ thuộc vào không gian trắng!)
Có lẽ bạn thích cách <span class=foo><span class=bar>BIG TEXT</span></span>1 tôn vinh không gian trắng và phá vỡ, nhưng bạn cần văn bản để bọc thay vì có khả năng thoát ra khỏi thùng chứa cha mẹ của nó. Đó là những gì <span class=foo><span class=bar>BIG TEXT</span></span>4 dành cho:
Cuối cùng, <span class=foo><span class=bar>BIG TEXT</span></span>5 sẽ phá vỡ các dòng nơi chúng bị hỏng trong mã, nhưng thêm không gian trắng vẫn bị tước.
Thật thú vị, sự phá vỡ dòng cuối cùng không được vinh danh. Theo thông số CSS 2.1: Các dòng bị hỏng tại các ký tự mới được bảo tồ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.
Dưới đâ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:
Sụp đổ | Sụp đổ | Bọc |
Bảo tồn | Bảo tồn | Không có bọc |
Sụp đổ | Sụp đổ | Không có bọc |
Bảo tồn | Bảo tồn | Bọc |
Bảo tồn | Sụp đổ | Bọc |
Bảo tồn
Không có bọc
- Trong CSS3, thuộc tính white-space thực sự sẽ tuân theo biểu đồ đó và ánh xạ các thuộc tính thành <div> A bunch of words you see. </div>2 và <div> A bunch of words you see. </div>3 theo đó.
- Thêm thông tin
- Tài sản CSS <div> A bunch of words you see. </div>4 (DigitalOcean)
Cách ngăn chặn việc phá vỡ dòng bằng CSS (DigitalOcean)
Cuộc đi săn | Opera | Opera | Opera | Opera | Opera |
Opera | Opera | Opera | Opera | Opera |