Hướng dẫn css remove extra space around text - css loại bỏ không gian thừa xung quanh văn bản

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; 
}

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>

<span class=foo><span class=bar>BIG TEXT</span></span>

Có lẽ bạn thích cách

<span class=foo><span class=bar>BIG TEXT</span></span>

<span class=foo><span class=bar>BIG TEXT</span></span>

Cuối cùng,

<span class=foo><span class=bar>BIG TEXT</span></span>

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:

<span class=foo><span class=bar>BIG TEXT</span></span>

<span class=foo><span class=bar>BIG TEXT</span></span>

<span class=foo><span class=bar>BIG TEXT</span></span>

<div>
  A bunch of words you see.
</div>

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)

Làm cách nào để loại bỏ các không gian bổ sung khỏi văn bản trong CSS?

Làm cách nào để loại bỏ lề khỏi văn bản?

Làm cách nào để bọc văn bản mà không có khoảng trống trong CSS?

Làm thế nào để bạn xử lý khoảng trắng trong CSS?