CSS3 줄임표, 가운데 맞춤 텍스트 및 반응 형 디자인

Question

10 억 개의 튜토리얼이 있지만 불행히도 나를 위해 일하지 않은 사람은 없습니다. 머리말에 가운데에있는 아티스트 이름이 필요하지만 줄임표 (css 생략 부호)가 있으므로 매우 긴 이름이 "..."이되어 잘립니다.

여기에서 디자인을 볼 수 있습니다. http://www.cphrecmedia.dk/musikdk/mobile/artistchannel.php 브라우저 창의 크기를 기억해야합니다.

모바일 용이므로 고정 된 withs를 사용할 수 없으며 모든 종류의 모바일 스크린 크기에서 작동해야합니다. 생략 부호를 사용할 수는 있지만 텍스트는 더 이상 중앙에 있지 않습니다. 이 작업을 수행하는 방법에 대한 단서가 있습니까? 나는 성능이 매우 중요하기 때문에 자바 스크립트를 피하고 싶습니다. display: inline-block를 사용

Answer 1

h1에 대한 규칙을 overflow & text-overflow으로 업데이트해야합니다. dartanian300로

.header h1, .headerwhite h1 { 
    font-size: 15px; 
    line-height: 49px; 
    text-overflow: ellipsis;/* generates dots if text on one single line and truncated */ 
    overflow: hidden;/* triggers text-oveflow and mids floatting elements */ 
    white-space: nowrap;/* keep text on a single line to trigger text-overflow; */ 
    display: block;/* reset to basic behavior of h1 , else inline-block drops down if not enough room */ 
} 

basicly 같은 대답 :

당신은 너무 h1의 최대 폭을 제어하고 margin:auto; 추가 할 수 있습니다 : demo

Answer 2

UPDATE

은 단순히 작은 화면에 전부 h1을 제거합니다. 당신은 이것을 피해야합니다.

기술적으로 텍스트는 여전히 중앙에 있습니다. 텍스트를 가운데에 배치 할 때 줄임표를 고려합니다.

ORIGINAL 답변 줄임표 스타일링, 당신은 텍스트 요소에 몇 가지를 설정할 수있어 작동하기 위해서는

:

• display: block;
• text-overflow: ellipsis;
• overflow: hidden;
• white-space: nowrap;

display: block 줄임표를 생성하려는 상자가 블록으로 표시되도록합니다. 그렇지 않으면 테두리 상자의 위치를 ​​알 수 없습니다.

text-overflow: ellipsis은 분명히 줄임표를 생성해야합니다.

overflow: hidden 어떤 이유로 브라우저는 사용자가 이것을 사용하지 않으면 생략 부호를 생성하지 않습니다. 나는 그것이 텍스트가 상자 밖에서 그냥 흐를 것이라는 사실과 관련이 있다고 생각한다.

white-space: nowrap 이렇게하면 텍스트가 여러 줄로 줄 바꿈되지 않습니다. 그렇게하면 끝 부분에 줄임표가있는 한 줄이 생깁니다.

그게 효과가 있니?