Làm thế nào để ngăn văn bản chiếm hơn 1 dòng?

331

Có một từ bao bọc hoặc bất kỳ thuộc tính nào khác ngăn văn bản bao bọc? Tôi có chiều cao vàoverflow:hidden , văn bản vẫn bị phá vỡ.

Cần phải làm việc trong tất cả các trình duyệt, trước CSS3.

— củi
nguồn

630

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>test that doesn't wrap</div>

Mở rộng đoạn trích

Lưu ý: điều này chỉ hoạt động trên các yếu tố khối. Nếu bạn cần làm điều này với các ô của bảng (ví dụ), bạn cần đặt một div bên trong ô của bảng vì các ô của bảng có ô hiển thị bảng không bị chặn.

Kể từ CSS3, điều này cũng được hỗ trợ cho các ô của bảng.

— cletus
nguồn

12

không gian trắng! Đó là những gì tôi đã tìm kiếm ... 1.000 cảm ơn ... điều này là không thể google!

2

Ngoài ra còn có một thuộc tính tức là độc quyền gọi là word-quấn (IIRC) ... IE ngu ngốc.

— garrow

21

Cũng xem xét "tràn văn bản: dấu chấm lửng;" Nó thêm ... vào cuối văn bản của bạn nếu nó nằm ngoài giới hạn về chiều rộng của bạn

— Drew Landgrave

1

Tôi nghĩ rằng nhận xét "điều này chỉ hoạt động trên các yếu tố khối" là đúng. Nếu bạn thử điều này trong một neo, đoạn, tiêu đề, vv, điều này không hoạt động. Bạn cần phải làm một cái gì đó nhưp.oneline { white-space:nowrap; overflow:hidden; display:block;}

— Alex Angelico

Cẩn thận với việc che giấu tràn; nó có nghĩa là kinh doanh.

— David A. Gray

57

Bạn có thể sử dụng CSS white-space Propertyđể đạt được điều này.

white-space: nowrap

— Robert C. Barth
nguồn

36

Sử dụng dấu chấm lửng sẽ thêm ... cuối cùng.

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>

— Vivek
nguồn

4

Đôi khi sử dụng  thay vì không gian sẽ làm việc. Rõ ràng nó có nhược điểm, mặc dù.

— Grossvogel
nguồn

Thật không may, tôi không thể làm điều đó trong tình huống này

2

Để rõ ràng, điều này hoạt động độc đáo với các đoạn văn và tiêu đề, vv Bạn chỉ cần xác định display: block .

Ví dụ:

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(tha thứ cho các kiểu nội tuyến)

— Duncan Jones
nguồn