Thêm dấu chấm/dấu chấm lửng trên phần tử div/span tràn mà không sử dụng jquery

Question

Cần triển khai chức năng tương tự như những gì dotdotdot Plugin jQuery thực hiện nhưng không thể sử dụng khung javascript (như jquery hoặc ext).

Có cách nào dễ dàng để thêm dấu chấm vào nội dung của phần tử div hoặc span nếu nội dung chiếm nhiều không gian hơn thì phần tử nên ??? (tương tự như những gì css overflow: ellipsis thiết lập không)

Không thể sử dụng lược + Nhà nó không hoạt động với nhiều dòng khi chiều cao bị hạn chế.

Cảm ơn bạn :)

Answer 1

Giải pháp của tôi cho vấn đề của tôi có thể có vẻ một chút vụng về, nhưng nó làm việc cho tôi :)

tôi đã sử dụng một chút CSS:

word-wrap: break-word; 

và Javascript:

var spans = document.getElementsByTagName("span"); 
for (var i in spans) { 
    var span = spans[i]; 
    if (/*some condition to filter spans*/) { // just 
     if (navigator.appName == 'Microsoft Internet Explorer') { 
      span.parentNode.style.display ='inline-block'; 
     } 
     if (span.parentNode.clientHeight > 50) { 
      span.innerHTML = span.innerHTML.substr(0, 26) + ' ...'; 
     } 
    } 
} 

Answer 2

Bạn có thể thử:

text-overflow: ellipsis; 
-o-text-overflow: ellipsis; 

này sẽ chỉ làm việc nếu các yếu tố của bạn không tự động kích thước. Họ sẽ phải có một bộ chiều rộng hoặc một số cơ chế khác để giữ cho chúng phát triển để cho phép nhiều nội dung hơn.

Answer 3

Tại sao không sử dụng tràn văn bản thuộc tính CSS? Nó hoạt động tuyệt vời miễn là bạn xác định chiều rộng trong thẻ của mình.

Class trong CSS:

.clipped { 
 
     overflow: hidden; 
 
     white-space: nowrap; 
 
     text-overflow: ellipsis; 
 
    } 
 

<div class="clipped" style="width: 100px;" title="This is a long text">This is a long text<div>

Bạn cũng có thể thêm văn bản vào thuộc tính title, vì vậy người dùng có thể xem toàn bộ văn bản khi lơ lửng trên phần tử.

Answer 4

CHO TẤT CẢ Trình duyệt:

.dotdot{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width:80px} 
.dotdot:before { content: '';} 

<div class="dotdot">[Button Text Goes here][1]</div> 

Answer 5

Làm việc cho bất kỳ số lượng các dòng và bất kỳ chiều rộng mà không có bất kỳ javascript - và đáp ứng. Chỉ cần đặt chiều cao tối đa của bạn thành bội số chiều cao dòng của bạn: tức là (chiều cao dòng 22px) * (tối đa 3 dòng văn bản) = (chiều cao tối đa 66px).

https://codepen.io/freer4/pen/prKLPy

html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;} 
 

 
.ellipsis{ 
 
    overflow:hidden; 
 
    margin-bottom:1em; 
 
    position:relative; 
 
} 
 

 
.ellipsis:before { 
 
    content: "\02026"; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right:0; 
 
    width: 1.8em; 
 
    height:22px; 
 
    margin-left: -1.8em; 
 
    padding-right: 5px; 
 
    text-align: right; 
 
    background-size: 100% 100%; 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 40%, white); 
 
    z-index:2; 
 
} 
 
.ellipsis::after{ 
 
    content:""; 
 
    position:relative; 
 
    display:block; 
 
    float:right; 
 
    background:#FFF; 
 
    width:3em; 
 
    height:22px; 
 
    margin-top:-22px; 
 
    z-index:3; 
 
} 
 

 
/*For testing*/ 
 
.ellipsis{ 
 
    max-width:500px; 
 
    text-align:justify; 
 
} 
 
.ellipsis-3{ 
 
    max-height:66px; 
 
} 
 

 
.ellipsis-5{ 
 
    max-height:110px; 
 
}

<div class="ellipsis ellipsis-3"> 
 
    <p>Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.</p> 
 
</div> 
 

 
<div class="ellipsis ellipsis-5"> 
 
    <p>The number of lines shown is easily controlled by setting the max-height of the .ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.</p> 
 
</div>