Text-overflow CSS truncation

Question

이전에는 JS를 사용하여 동적으로 작업을 수행했지만 대신 대체 옵션이 필요한 성능 문제가 발생했습니다.

이제 텍스트 오버 플로우 스타일을 사용하여 내 탭 이름에서 긴 텍스트를 자르고 있습니다. 내 텍스트 잘림

이 텍스트가 되길되어 보이는 방법

하지만 어떤 사람이 그것을

를 해결할 수 있다면 난 작은 문제가 현재이 ... 여기

세입니다 도트 (...)는 검은 색으로 표시되며 빨간색으로 변경하고 싶습니다.

우리가 이것을 달성 할 수있는 방법이 있습니까?

Answer 1

여기 작품 :

• http://jsfiddle.net/TReRs/4/

코드 (HTML & CSS) :

<div class="overme"> 
    how much wood can a woodchuck chuck if a woodchuck could chuck wood? 
</div> 

CSS :

.overme { 
    width: 300px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis; 
    color: red; 
} 

기본 CSS를 사용하여 후행 점/줄임표가 빨간색으로 표시됩니다.

Answer 2

빨간색으로 만 점을 표시한다고 가정합니다. 불행히도 이것은 간단한 CSS에서는 불가능합니다. 그러나 나는 사용자 정의 줄임표 스타일을 만들기 위해 관리하는 튜토리얼, 즉에만 필요한 때 표시됩니다 발견

https://www.mobify.com/dev/multiline-ellipsis-in-pure-css/

그것은 꽤 좋은 해킹과 말로 설명하기 쉽지 않다. 어쩌면 난 그냥 만든이 jsfiddle 당신을 도울 수 있습니다

http://jsfiddle.net/MyUQJ/9/

는 무슨 일이 일어나고 있는지 확인하기 위해 .wrap에 overflow: hidden;를 제거합니다. 주요 아이디어는 텍스트가 넘칠 때 div가 .left-side의 왼쪽 하단으로 이동하는 반면 오버플로하지 않을 때는 .text의 오른쪽 하단으로 이동한다는 것입니다. 그런 다음 .ellipsis div는 상대적인 .end 안에 절대 위치하므로 텍스트가 넘칠 때 보이게하고 텍스트가 넘칠 때 넘칠 때 볼 수 있습니다. 웃기지 않니?

어쨌든

, 여기에 원시 코드입니다 :

HTML :

<div class="wrap"> 
    <div class="left-side"></div> 
    <div class="text"> 
     This is a short story, it 
     doesn't need to be ellipsed. 
    </div> 
    <div class="end"> 
     end 
     <div class="ellipsis">...</div> 
    </div> 
</div> 

<br> 
<br> 
<br> 
<br> 

<div class="wrap"> 
    <div class="left-side"></div> 
    <div class="text"> 
     This is a long story. You won't be able to 
     read the end of this story because it will 
     be to long for the box I'm in. The story is 
     not too interesting though so it's good you 
     don't waste your time on this. 
    </div> 
    <div class="end"> 
     end 
     <div class="ellipsis">...</div> 
    </div> 
</div> 

CSS : 당신은 당신이 모든 테두리를 제거 할이를 구현거야 물론

.wrap { 
    height: 100px; 
    width: 234px; 
    border: solid 1px #000; 
    overflow: hidden; 
} 

.left-side { 
    float: left; 
    width: 32px; 
    height: 100px; 
    background: #F00; 
} 

.text { 
    float: right; 
    border: solid 1px #0F0; 
    width: 200px; 
} 

.end { 
    position: relative; 
    float: right; 
    width: 30px; 
    border: solid 1px #00F; 
} 

.ellipsis { 
    position: absolute; 
    top: -25px; 
    left: 198px; 
    background: white; 
    font-weight: bold; 
    color: #F0F; 
} 

, 및 '끝'텍스트 나는 이해하기 쉬운 예제로 만들었다.또한 줄 바꿈을 position: absolute;으로 지정하고 margin-left: -32px으로 지정하면 너비가 .left-side의 너비이므로 텍스트의 왼쪽에 여백이 생기지 않게 할 수 있습니다.

행운을 빈다.