tràn css - chỉ có 1 dòng văn bản

Tôi có divkiểu css sau:

width:335px; float:left; overflow:hidden; padding-left:5px;

Khi tôi chèn, vào đó div, một dòng văn bản dài, nó sẽ chuyển sang một dòng mới và hiển thị tất cả văn bản. Điều tôi muốn là chỉ có một dòng văn bản sẽ không ngắt dòng. Khi văn bản dài, tôi muốn văn bản tràn này biến mất.

Tôi đã suy nghĩ về việc thiết lập chiều cao nhưng dường như là sai.

Có lẽ nếu tôi thêm chiều cao giống với phông chữ, nó sẽ hoạt động và không gây ra bất kỳ vấn đề nào trong các trình duyệt khác nhau?

Làm thế nào tôi có thể làm điều đó?

Nếu bạn muốn giới hạn nó trong một dòng, hãy sử dụng white-space: nowrap;trên div.

Nếu bạn muốn chỉ ra rằng vẫn còn nhiều nội dung có sẵn trong div đó, có lẽ bạn có thể muốn hiển thị "dấu chấm lửng":

text-overflow: ellipsis;

Điều này nên được thêm vào white-space: nowrap;đề xuất của Septnuits.

Ngoài ra, hãy đảm bảo bạn kiểm tra luồng này để xử lý việc này trong Firefox.

Bạn có thể sử dụng mã css này:

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

Các văn bản tràn bất động sản trong CSS giao dịch với các tình huống mà văn bản được cắt bớt khi nó tràn hộp của phần tử. Nó có thể được cắt bớt (tức là cắt, ẩn), hiển thị dấu chấm lửng ('' ', Giá trị phạm vi Unicode U + 2026).

Lưu ý rằng tràn văn bản chỉ xảy ra khi thuộc tính tràn của bộ chứa có giá trị ẩn , cuộn hoặc tự động và khoảng trắng: nowrap; .

Tràn văn bản chỉ có thể xảy ra trên các phần tử mức 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ó thể tràn. Sự cố tràn xảy ra theo hướng được xác định bởi thuộc tính hướng hoặc thuộc tính liên quan.

mã tốt nhất cho UX và UI là

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

nếu thêm xin vui lòng, nếu bạn có một văn bản dài xin vui lòng bạn có thể sử dụng mã css dưới đây;

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

làm cho toàn bộ dòng văn bản hiển thị.

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Xác định chiều rộng cũng để đặt tràn trong một dòng

Tôi đã có cùng một vấn đề và tôi đã giải quyết nó bằng cách sử dụng:

display: inline-block;

về divcâu hỏi