113

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 đó?

|
294

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.

|
69

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 chuỗi này để xử lý việc này trong Firefox.

|
27

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 bỏ, ẩn), hiển thị dấu chấm lửng ('' ', Unicode Phạm vi giá trị 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 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.

|
4

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

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

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

|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.