Làm thế nào để giữ div trên một hàng và nối thêm các elip

Question

Có cách nào trong css để đảm bảo rằng một div hoặc lớp chỉ là một dòng văn bản và nếu nó chạy qua, hãy thêm dấu chấm lửng vào nó? Tôi biết rằng bạn có thể đặt div/class thành một độ cao nhất định và overflow:hidden, nhưng có vẻ lạ đối với những gì tôi đang cố gắng làm.

Trong hình bên dưới, bạn thấy rằng div bên phải lớn hơn hình bên trái. Nếu tôi có thể làm cho tên của bài hát một dòng với hình elip, cả hai sẽ có cùng chiều cao. Bất cứ ai biết làm thế nào để thực hiện điều này? P.S. Tôi muốn một cách tốt hơn làm một cái gì đó như $song = substr(0, 10, $song) trong php ... một cái gì đó hy vọng có thể với CSS.

Answer 1

1. Đặt chiều rộng trên vùng chứa.
2. Đặt không gian trắng: bẻ cong.
3. Đặt tràn văn bản: dấu ba chấm.
4. Ẩn tràn *

Demo: http://jsfiddle.net/jD99d/

.my-class-name { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    width: 100px; 
    overflow: hidden; 
} 

Xem https://developer.mozilla.org/en-US/docs/CSS/text-overflow

^{* Lưu ý rằng "tài sản CSS này không buộc một tràn xảy ra; làm như vậy và làm cho tràn văn bản được áp dụng, tác giả phải áp dụng một số thuộc tính bổ sung trên phần tử, như thiết lập tràn để ẩn. "}