CSS-break kết hợp với tràn văn bản

Question

Vì vậy, tôi đang cố gắng kết hợp word-break với text-overflow hoạt động ở một thời điểm nào đó nhưng không hoạt động như thế nào.

Ví dụ, tôi đã thiết lập này Fiddle

CSS:

width: 200px; 
padding: 8px; 
border:1px solid blue; 
word-break: break-word; 
height: 100px; 
overflow: hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 

Để làm rõ, một khi văn bản được chia trong các bộ phận cần điền hộp và ở phần cuối của văn bản cần có 3 chấm. Hiện tại, chỉ có một dòng duy nhất hoạt động.

Answer 1

Theo như tôi biết, điều này là không thể sử dụng CSS.

Điều duy nhất bạn có thể làm là chỉ định height và overflow:hidden. (Không có dấu chấm lửng nào ở cuối.)

Điều này được nêu trong số W3 spec for text-overflow.

lược
một chuỗi lược được chèn vào mỗi hộp ranh giới, nơi một tràn văn bản xảy ra. Giá trị của các chuỗi dấu ba chấm này là được xác định bởi thuộc tính 'text-overflow-ellipsis'. Các chèn diễn ra tại ranh giới của các đại diện hình tượng đầy đủ cuối cùng của một dòng văn bản
...
Nói cách khác, các văn bản-overflow-mode chỉ ảnh hưởng đến nội dung văn bản của một yếu tố ngăn chặn mà tham gia dòng nội tuyến của riêng nó.

Bạn sẽ cần phải sử dụng JavaScript để đạt được điều này.

Dưới đây là một ví dụ về một plugin jQuery: http://pvdspek.github.com/jquery.autoellipsis/