부분적으로 h1의 단어 숨기기

두 단어로 이루어진 창에 충분한 공간이 없을 때 다음 단어로 감싸는 대신 마지막 단어를 제거하거나 숨기려고하는 간단한 두 단어 헤더가 있습니다. 말. 그 옵션을 선택하지 그래서부분적으로 h1의 단어 숨기기

<h1>First Last</h1>

나는, CSS에 대한 첫 단어 선택기가 없음을 알고있다. 오버플로를 숨길 수는 있지만 마지막 단어는 한 번에 사라지기를 원하며 문자로는 끝내지 않습니다. 그리고 물론, white-space:nowrap; 마음에 온다,하지만 그 단어를 제거하지 않습니다.

CSS로이 작업을 수행 할 수있는 방법이 있습니까? 고정 된 높이 또는 너비가없는 것이 좋습니다.

2013-07-09 Anonymous

'text-overflow : ellipsis;'시도한 적이 있습니까? http://jsbin.com/epihik/1/edit – balexandre

@balexandre, 예, 지금 사용하고있는 내용입니다. 그러나이 경우 줄임표는 사이트 제목에서보기가 좋지 않으며 첫 단어 만 사용하는 것이 좋습니다. 그것은 첫 번째 이름입니다. 그래서 제가 차라리 첫 단어를 갖고있는 것입니다. –

태그에서 마지막 단어를 선택할 가능성이 없습니다.

물론

h1 { 
    visibility: hidden; 
} 

h1:before { 
    visibility: visible; 
    content: "First"; 
}

, 이것은 나타났다 내용을 지정할 필요 : 라인의 크기가 너무 작 으면 내가 생각할 수있는 유일한 가능성이 사용자 정의 CSS를로드하는 media query를 사용하는 것이 었습니다.

2013-07-09 10:45:29

아, 왜 그렇게 생각하지 않았어! 이 부분을 약간 수정하고 마지막 단어를 스팬으로 둘러싼다고 생각합니다. 이렇게하면 생성 된 콘텐츠를 사용할 필요가 없습니다. –

두 번째 생각에, 당신의 솔루션은 더 우아합니다. 그런데 공간을 차지하지 않으려면 h1에'font-size : 0;'을 추가해야한다는 것을 알았습니다. –

이것은 물론 사실입니다 (일부 브라우저의 경우). –

심플. white-space:nowrap; CSS 속성을 사용하십시오.

h1 { 
    white-space: nowrap; 
}

이렇게하면 창이 크기를 조정하더라도 텍스트가 줄 바꿈되지 않고 창이 축소되면 숨겨집니다.

문제를 설명하기 위해 여기에 WORKING DEMO이 있습니다.

2013-07-09 10:36:53 Nitesh

재밌 네요, 그냥 질문에 추가했습니다. 큰 마음은 다 비슷 하네 :). 그것은 개선되었지만 단어를 잘라 내지 않습니다 (오버 플로우를 사용할 수 있습니다 : 숨김, 그러나 마지막 단어의 비트를 남기고 전체 단어를 제거하지는 않습니다). –

예 .. 사실 좋은 우연의 일치. 사실입니다.오버플로 : 숨김 옵션은 좋은 옵션 일 수 있지만 다시보기 만하면 코드가 스 니프되지만 생성 될 전체 HTML은 표시되지 않습니다. 미디어 쿼리를 사용할 수 있습니다. – Nitesh

나는 ususally 당신이 내가 할 수있는 모든에서 아무것도하지 않으려면 앞으로 더 많은 텍스트가,이 보여 ...

h1 { 
    font-size: 250px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    width: 745px;

같은}

줄임표 출력을

text-overflow: inherit;

또 다른 유용한 팁은 텍스트를 자르면 h1에 제목 속성을 추가하여 사용자가 마우스로 가리키면 전체 단어를 볼 수 있도록하는 것입니다.

당신이 넘치는 단어 다음 라인 (들) 휴식을 할 경우, 그 효과를 생성하는 대신 폭의 높이와 오버 플로우를 사용할 수 있습니다

<h1 title="First Last">First Last</h1>

2013-07-09 10:40:48 ak85

예 :

h1 { 
    height: 30px; 
    overflow: hidden; 
}

2013-07-09 10:40:59

답변