jquery를 사용하지 않고 div/span 요소 오버플로에 도트/줄임표 추가

Question

dotdotdot jQuery 플러그인은 과 비슷한 기능을 구현해야하지만 자바 스크립트 프레임 워크는 사용할 수 없습니다 (예 : jquery 또는 ext).

콘텐츠가 더 많은 공간을 차지한다면 div 요소 또는 span 요소의 내용에 점을 추가하는 쉬운 방법이 있습니까? (어떤 CSS 오버 플로우과 유사한 설정하지 생략) 높이가 제한되는 경우가 많은 라인이 작동하지 않습니다 beacause를

는 생략를 사용할 수 없습니다.

감사합니다 :)

Answer 1

:

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

당신은 시도 할 수 있습니다 : 당신의 요소를 동적으로 크기가 아닌 경우

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

이에만 작동합니다. 그들은 더 많은 콘텐츠를 허용하기 위해 성장하지 못하도록 너비 세트 또는 다른 메커니즘을 가져야합니다.

Answer 3

CSS 속성 text-overflow를 사용하지 않는 이유는 무엇입니까? 태그에서 너비를 정의하는 한 훌륭하게 작동합니다. 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>

당신은 또한 title 속성에 텍스트를 추가 할 수 있습니다.

내 문제에 대한 내 솔루션은 조금 어색하게 보일 수 있지만,이

내가 CSS의 조금 사용 나를 :) 작동

Answer 4

을 :

word-wrap: break-word; 

및 자바 스크립트 FOR ALL 브라우저 :

.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

모든 라인 수와 자바 스크립트없이 모든 너비에서 작동하며 반응 적입니다. 최대 높이를 라인 높이의 배수, 즉 (22 픽셀 줄 높이) * (최대 3 줄의 텍스트) = (최대 높이 66 픽셀)로 설정하면됩니다.

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>