긴 텍스트는 CSS로 숨겨져 야합니다

나는 이와 같은 코드가 있습니다. HTML :긴 텍스트는 CSS로 숨겨져 야합니다

<div> 
    <h3>Sometext</h3> 
</div>

CSS : 여기

div { 
    width: 20px; 
} 
h3 { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

문제 H3 태그 "Sometext는"전용 "Somete"로 작성해야하지만, 오버 플로우 및 텍스트 오버 플로우 모두 도움이되지 않는다는 것입니다. H3 꼬리표는 아직도 보일 수있다.

2017-10-11 Genjik

난 정말 당신이 원하는 것을 이해하지 ... 당신은 "Somete"를 표시하고 싶지만 당신은 그것을 볼 수없는 것을 ... 당신이 명확하게 설명 할 수 있습니까? –

이 div에 div와 h3이 있음을 의미합니다. 텍스트가 div의 특별한 너비에 맞지 않으면이 텍스트의 마지막 3 단어를 숨기고 "..."로 바꾸고 싶습니다. – Genjik

가능한 [텍스트 오버플로 : 줄임표가 작동하지 않음] (https://stackoverflow.com/questions/7993067/text-overflow-ellipsis-not-working) –

텍스트 오버 플로우 사용 : 클립; 폭은

h3 { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: clip; 
 
    width: 59px; 
 
}

<div> 
 
    <h3>Sometext</h3> 
 
</div>

2017-10-11 03:57:40 Gattbha

고마워요! 그것은 효과가 있었다. – Genjik

다음에는 text-overflow : ellipsis; 하지만 그것은 somet 표시됩니다 ... 사용 너비 72px – Gattbha

이를 확인하시기 바랍니다 H3합니다.

h3 { 
 
    width: 70px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis;  
 
}

<div> 
 
    <h3>Sometext</h3> 
 
</div>

2017-10-11 04:15:40

텍스트 오버 플로우 : 줄임표는 나를 위해 잘 작동하지만, u는 폭 20 픽셀은 세 가지 줄임표 점 (...)와 텍스트를 표시 너무 작 decleare. 그것이 단순한 것만 보여주는 이유입니다 ...

너는 단지 70px처럼 너비를 늘리면 효과가 있습니다. 그리고 u가 오버 플로우를 숨긴다 고 말하면 text-overflow: clip을 지정할 필요가 없습니다.

width: 70px; text-overflow: clip

2017-10-11 06:42:00

답변