HTML/CSS "Responsive Truncation"

Question

최근에 내 사이트의 반응 형 버전을 시작했지만, 한 줄의 텍스트를 포함하는 백분율 너비 부분이 모두보기에 좋지 않은 것처럼 보입니다. 데스크탑 및 모바일 뷰는 텍스트의 각 단일 라인이 너무 길거나 너무 짧아지게합니다.

내 마크 업은 긴 앵커 텍스트가 포함 된 순서가 지정되지 않은 단일 링크 목록입니다. 앵커 텍스트를 포함하는 부분의 너비에 따라자를 제안 할 사람이 있습니까?

Answer 1

나는 두 가지 옵션을 가지고 올 수 :

하나는

는 자바 스크립트를 사용하여 스스로를 어떻게 여기에 설명 :

Calculate text width with JavaScript

나는 폭을 결정하는 어떤 방법이라고 생각하지 않습니다 브라우저가 실제로 텍스트를 렌더링 할 때까지 텍스트의

표시하지 않도록하십시오. 아무 것도 표시되지 않거나 브라우저가 실제로 렌더링하지 않고 너비를 결정할 수 없습니다.

두 번째는 CSS가 당신을 위해 그것을하도록하는 것입니다. 그것은 쉽게,하지만 당신은 거의 모든 유연성을 잃게 :

는 생략 부호로 텍스트를 차단하는 방법을 CSS의 추측을 할 의향이 있다면, 당신은 텍스트 오버 플로우를 시도 할 수 있습니다 : 줄임표

http://www.quirksmode.org/css/textoverflow.html