은 제목 옆에있을 줄임표와 텍스트를 잘린다이 같은 고전 줄임표로 잘립니다 제목과 요약이 너무 긴 경우, 내가 좋아하는 것 옆에 내가 요약을하고 싶은

Question

:

내가 정의 할 요약의 폭을 원하지 않는

내 제목이 내가 원하는 매우 긴 텍스트이다는 ..., 나는 그것이 같은 모든 방을 소요 싶습니다 선. overflow: hidden과 text-overflow: ellipsis을 사용하려했지만 잘린 텍스트를 제목 옆에 넣을 수 없습니다. 텍스트가 제목 옆에 있으면 요약이 잘리지 않습니다. 텍스트가 잘 리면 제목 옆에 없습니다.

이

내 시도의 일부입니다 :

CSS를

<h2 class="title"> 
    My Title 
    <span class="tiny shortening">This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten shorten</span> 
</h2> 

<h2> 
    My Title 
    <div class="tiny shortening">This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten </div> 
</h2> 

당신은 폭과 같은 단축에 폭을 설정해야

.title { 
    white-space: nowrap; 
} 

.inline { 
    display: inline; 
} 

.tiny { 
    font-size: 70%; 
} 

.shortening { 
    white-space: nowrap; 
    overflow: hidden !important; 
    text-overflow: ellipsis; 
} 

Answer 1

나는 fiddle을 작성했습니다. 실제로 브라이언 글래스 (Brian Glaz)는 덧글에서 .shortening 스타일을 .title으로 옮겼습니다. 또한 텍스트 주위에 래퍼를 추가하여 너비가 어느 정도 차지하는지도 알고 있습니다.

궁금한 점이 있으면 알려주십시오.

Answer 2

: 200 픽셀; 잘림이 없으면 텍스트를자를 이유가 없습니다.