CSS tràn qua văn bản Dấu ba chấm không hiển thị

Question

Tôi có một div với một số nội dung bên trong mà tôi cần phải có một dấu chấm lửng khi nó tràn. Tôi đã làm điều này nhiều lần trên các yếu tố khác, nhưng vì một số lý do này không hoạt động như mong đợi.

Ngoài ra, tôi còn lại white-space:nowrap; vì mục đích vì nội dung sẽ không vi phạm đến dòng kế tiếp trong khoảng thời gian, do đó, tôi chỉ thấy 2-3 từ trước khi dấu ba chấm bắt đầu. Tôi muốn văn bản kéo dài toàn bộ chiều cao của vùng chứa gốc, sau đó bắt đầu hình elip cho nội dung tồn tại vượt quá giới hạn đó.

Đây là một Demo làm việc: http://jsfiddle.net/sadmicrowave/DhkSA/

CSS:

.flow-element{ 
    position:absolute; 
    font-size:12px; 
    text-align:center; 
    width:75px; 
    height:75px; 
    line-height:70px; 
    border:1px solid #ccc; 
} 

.flow-element .inner{ 
    position:absolute; 
    width:80%; 
    height:80%; 
    border:1px solid blue; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    margin:auto; 
    text-align:center; 
} 

.flow-element .long{ 
    float:left; 
    height:50px; 
    width:100%; 
    line-height:12px; 
    border:1px solid red; 
    text-overflow:ellipsis; 
    overflow:hidden; 
} 

HTML:

<a class='flow-element' style='top:100px; left:50px;'> 
    <div class='inner'> 
    <span class='long'>Box 1 and some other content that should wrap and do some other stuff</span> 
    </div> 
</a> 

Ai đó có thể xin vui lòng giúp đỡ. Tôi cần phải hiển thị càng nhiều văn bản càng tốt trong khoảng vạch đỏ trong khi có một dấu chấm lửng khi nội dung văn bản tràn container ...

Cảm ơn trước

Answer 1

bạn không thể áp dụng text-overflow: ellipsis để inline yếu tố (khoảng), nó có thể được sử dụng với các yếu tố khối chỉ (div)

và cũng sử dụng white-space:nowrap; khi sử dụng text-overflow: ellipsis;

việc kiểm tra này, tôi đã chuyển đổi của bạn khoảng nội tâm để div, chỉ cần bằng chứng về khái niệm

http://jsfiddle.net/3CgcH/5/

tôi không biết lý do tại sao bạn đã sử dụng khoảng thời gian, nhưng theo logic của bạn, bạn có thể làm cho chang es như tôi đề nghị

Cập nhật:

ai đó sẽ nghĩ rằng trong câu hỏi nếu tôi đặt white-space: nowrap; để span yếu tố thì text-overflow: ellipsis: đang làm việc để có thể tôi đã sai lầm, nhưng nó không phải là trường hợp vì người hỏi đã sử dụng float: left trong thẻ span có nghĩa là thẻ span sẽ được chuyển đổi thành một khối hộp và hoạt động như một phần tử cấp khối bình thường, đó cũng là điều sai phải làm bởi vì nếu bạn cần hành vi phần tử khối sau đó sử dụng yếu tố cấp khối

Tham khảo:

http://www.w3.org/TR/CSS2/visuren.html#propdef-float

http://dev.w3.org/csswg/css3-ui/#text-overflow

Answer 2

Thêm white-space:nowrap; để div .inner của bạn.

Answer 3

Thêm này:

white-space:nowrap; 

để .flow phần tử .long

sau đó các tác phẩm tràn-ellispsis.

Answer 4

Tôi nghĩ bạn sẽ thấy vấn đề là do có văn bản căn chỉnh: center;