Ngăn chặn ngắt dòng của phần tử span

242

Tôi có một <span>yếu tố mà tôi muốn hiển thị mà không có bất kỳ ngắt dòng nào. Làm thế nào tôi có thể làm điều đó?

html css

— Ngẫu nhiên
nguồn

nếu bạn đang tìm cách triệt tiêu chúng, hãy xem stackoverflow.com/questions/425274/ cấp

— amwinter

407

Đặt cái này vào CSS của bạn:

white-space:nowrap;

Nhận thêm thông tin tại đây: http://www.w3.org/wiki/CSS/ProperIES/white-space

white-space

Các white-spacebất động sản tuyên bố như thế nào không gian màu trắng bên trong phần tử được xử lý.

Giá trị

normal Giá trị này chỉ đạo các tác nhân người dùng thu gọn các chuỗi khoảng trắng và ngắt các dòng khi cần thiết để điền vào các ô dòng.

pre Giá trị này ngăn các tác nhân người dùng thu gọn các chuỗi khoảng trắng. Các dòng chỉ bị ngắt ở các dòng mới trong nguồn hoặc tại các lần xuất hiện của "\ A" trong nội dung được tạo.

nowrap Giá trị này thu gọn khoảng trắng như đối với 'bình thường', nhưng triệt tiêu ngắt dòng trong văn bản.

pre-wrap Giá trị này ngăn các tác nhân người dùng thu gọn các chuỗi khoảng trắng. Các dòng bị hỏng tại các dòng mới trong nguồn, tại các lần xuất hiện của "\ A" trong nội dung được tạo và khi cần thiết để điền vào các hộp dòng.

pre-line Giá trị này chỉ đạo các tác nhân người dùng thu gọn các chuỗi không gian trắng. Các dòng bị hỏng tại các dòng mới trong nguồn, tại các lần xuất hiện của "\ A" trong nội dung được tạo và khi cần thiết để điền vào các hộp dòng.

inherit Có cùng giá trị được chỉ định làm thuộc tính cho cha của phần tử.

— Daan
nguồn

3

Cũng rất hay để thêm một số tài liệu ở đây: w3.org/wiki/CSS/ProperIES/white-space

— Justus Romijn

21

Đối với trường hợp khi bạn có nhiều nhịp trong div và bạn muốn đạt được nhịp đơn dòng nhưng không phải là div dòng đơn, bạn phải thêm vào span cũng hiển thị: inline-block;. Hy vọng nó sẽ giúp cho ai đó.

— walv

16

Nếu bạn chỉ cần ngăn chặn ngắt dòng trên các ký tự khoảng trắng, bạn có thể sử dụng  các thực thể giữa các từ:

No&nbsp;line&nbsp;break

thay vì

<span style="white-space:nowrap">No line break</span>

— Dầu rửa mặt Brent
nguồn

1

Với lớp Bootstrap 4:

text-nowrap

Tham chiếu: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

— Ông cầu toàn
nguồn

0

white-space: nowraplà giải pháp chính xác nhưng nó sẽ ngăn chặn bất kỳ sự phá vỡ nào trong một dòng. Nếu bạn chỉ muốn ngăn chặn ngắt dòng giữa hai yếu tố thì sẽ phức tạp hơn một chút:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

Để ngăn ngắt giữa các nhịp nhưng để cho phép ngắt giữa "Một số" và "văn bản" có thể được thực hiện bằng cách:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

Điều đó đủ tốt cho Firefox. Trong Chrome, bạn cũng cần thay thế khoảng trắng giữa các nhịp bằng một  . (Xóa khoảng trắng không hoạt động.)

— wortwart
nguồn