CSS 줄임표. 줄 끝에 CSS를 사용하는 줄임표. 텍스트 끝에 줄임표
블라드 메르제비치
대형 대각선 모니터가 더 저렴해지고 해상도가 지속적으로 증가하고 있음에도 불구하고 때로는 제한된 공간에 많은 텍스트를 맞추는 작업이 있습니다. 예를 들어 사이트의 모바일 버전이나 라인 수가 중요한 인터페이스에 필요할 수 있습니다. 이러한 경우 문장의 시작 부분만 남기고 긴 줄의 텍스트를 잘라내는 것이 좋습니다. 따라서 인터페이스를 간결한 형태로 가져오고 출력 정보의 양을 줄일 것입니다. 라인 커팅 자체는 동일한 PHP를 사용하여 서버 측에서 수행할 수 있지만 CSS를 통해 더 쉽고 예를 들어 마우스 커서로 마우스를 가져가면 항상 전체 텍스트를 표시할 수 있습니다. 다음으로 가상 가위로 텍스트를 자르는 방법을 고려하십시오.
실제로는 hidden 값과 함께 overflow 속성을 사용하는 것으로 귀결됩니다. 차이점은 텍스트의 다른 표시에만 있습니다.
오버플로 사용
overflow 속성이 텍스트와 함께 자체적으로 표시되도록 하려면 값이 nowrap 인 공백을 사용하여 텍스트 줄 바꿈을 취소해야 합니다. 이 작업을 수행하지 않으면 필요한 효과가 없으며 텍스트에 하이픈이 추가되고 전체가 표시됩니다. 예제 1은 지정된 스타일 속성 세트로 긴 텍스트를 자르는 방법을 보여줍니다.
예 1. 텍스트 오버플로
HTML5 CSS3 IE Cr Op Sa Fx
이 예제의 결과는 그림 1에 나와 있습니다. 1.
쌀. 1. 오버플로 속성 적용 후 텍스트의 모습
그림에서 알 수 있듯이 일반적으로 한 가지 단점이 있습니다. 텍스트가 계속되는 것이 분명하지 않으므로 사용자가 이를 인식해야 합니다. 이를 위해 일반적으로 기울기 또는 줄임표가 사용됩니다.
텍스트에 그라데이션 추가
오른쪽의 텍스트가 끝나지 않는다는 것을 명확히 하기 위해 그 위에 투명에서 배경색까지 그라데이션을 적용할 수 있습니다(그림 2). 이것은 텍스트의 점진적인 용해 효과를 만듭니다.
쌀. 2. 그라데이션 텍스트
예제 2는 이 효과를 만드는 방법을 보여줍니다. 요소 자체의 스타일은 실질적으로 동일하게 유지되지만 그래디언트 자체는 ::after 의사 요소와 CSS3를 사용하여 추가됩니다. 이를 위해 content 속성을 통해 빈 의사 요소를 삽입하고 기본 브라우저에 대해 다른 접두사를 사용하여 그라디언트를 적용합니다(예 2). width 를 통해 그라디언트의 너비를 쉽게 변경할 수 있으며 값 0.2를 자신의 값으로 대체하여 투명도를 조정할 수도 있습니다.
예제 2: 텍스트 위의 그라데이션
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
인트라 디스크리트 아르페지오는 폴리레인지를 변형하며, 이것은 울트라 폴리포닉 폴리포닉 패브릭의 일회성 수직입니다.
이 방법은 그라디언트를 지원하지 않기 때문에 Internet Explorer 버전 8.0 이하에서는 작동하지 않습니다. 그러나 CSS3를 포기하고 PNG-24 이미지를 통해 구식 방식으로 그래디언트를 만들 수 있습니다.
이 방법은 단색 배경에서만 작동하며 배경 이미지의 경우 텍스트 위의 그라데이션이 두드러집니다.
텍스트 끝에 줄임표
잘린 텍스트의 끝에 그라데이션 대신 줄임표를 사용할 수도 있습니다. 또한 text-overflow 속성을 사용하여 자동으로 추가됩니다. 이전 버전의 IE를 포함하여 모든 브라우저에서 이해할 수 있으며 이 속성의 유일한 단점은 현재까지 상태가 명확하지 않다는 것입니다. 이 속성은 CSS3에 포함된 것으로 보이지만 해당 속성이 포함된 코드는 유효성 검사를 통과하지 않습니다.
예제 3에서는 줄임표를 추가하는 ellipsis 값과 함께 text-overflow 속성을 사용하는 방법을 보여줍니다. 텍스트 위로 마우스 커서를 이동하면 텍스트 전체가 표시되고 배경색으로 강조 표시됩니다.
예제 3: 텍스트 오버플로 사용
HTML5 CSS3 IE Cr Op Sa Fx
이 예제의 결과는 그림 1에 나와 있습니다. 삼.
쌀. 3. 줄임표가 있는 텍스트
이 방법의 큰 장점은 텍스트가 짧고 지정된 영역에 완전히 맞는 경우 그라데이션과 줄임표가 표시되지 않는다는 사실입니다. 따라서 텍스트가 화면에 완전히 표시되면 정상적으로 렌더링되고 요소의 너비가 줄어들면 잘립니다.
제품 링크의 긴 이름(각각 3줄) 또는 다른 블록의 긴 제목이 얼마나 짜증나는가. 어떻게 든 전체를 조이고 더 작게 만들 수 있다면 얼마나 좋을까요. 마우스로 가리키면 이미 전체 제목이 표시됩니다.
이를 위해 우리가 가장 좋아하는 CSS가 도움이 될 것입니다. 아주 간단합니다.
제품 카탈로그에서 다음 블록이 있다고 가정해 보겠습니다.
구조는 다음과 같습니다.
슈퍼 가격의 훌륭한 제품, 단 100 루블. 당신의 쓸쓸한 저녁을 밝혀주고 활력을 불어넣어주세요!
그의 스타일은 다음과 같습니다.
Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px ; )
동의합니다. 끔찍해 보입니다. 물론 제품명을 줄여도 됩니다. 하지만 수백, 수천 개가 있다면 어떨까요? 또한 php를 사용하여 이름의 일부를 잘라 특정 문자 수로 제한할 수 있습니다. 그러나 나중에 레이아웃이 변경되고 블록이 더 작아지거나 그 반대의 경우 2-3배 더 커지면 어떻게 될까요? 이 모든 것은 선택 사항이 아니며 이 모든 것이 우리에게 적합하지 않습니다.
그리고 여기 CSS가 구조와 그 마법 속성에 온다 텍스트 오버플로. 그러나 몇 가지 다른 속성과 함께 적절하게 사용해야 합니다. 아래에서 기성품 솔루션을 보여준 후 무엇이 무엇인지 설명하겠습니다.
따라서 제품 이름을 수동으로 편집하고 프로그래밍 방식으로 스타일을 다듬는 것은 제쳐두고 CSS를 사용하여 결과를 확인합니다.
Miracle Yudo power-giver 저녁, 신비, 예술. 20255-59
슈퍼 가격의 훌륭한 제품, 단 100 루블. 당신의 쓸쓸한 저녁을 밝혀주고 활력을 불어넣어주세요!
글쎄요? 제 생각에는 매우! 그리고 마우스를 이름으로 가져 오십시오 ... 짜잔! 여기에서 우리에게 완전히 보여줍니다.
우리 구조에는 아무 것도 변경되지 않았습니다. 방금 클래스에 디바를 추가했습니다. .머리글제목 태그. 새로운 스타일은 다음과 같습니다.
Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px ; 오버플로: 숨김; 텍스트 오버플로: 줄임표; 공백: nowrap; )
우리가 한 일을 보십시오:
- 블록에 속성을 추가했습니다. 공백: nowrap, 텍스트에서 새 줄의 단어 줄 바꿈 가능성을 제거하여 줄로 늘립니다.
- 그런 다음 속성을 추가했습니다. 오버플로: 숨김, 우리 선의 가시성을 블록 너비로 제한하여 불필요한 것을 모두 차단하고 방문자에게 표시하지 않습니다.
- 음, 마지막에 속성을 통해 문자열에 줄임표를 추가했습니다. 텍스트 오버플로: 줄임표, 따라서 방문자는 이것이 라인의 끝이 아니며 아마도 마우스를 올리고 전체를 보아야 한다는 것을 이해할 수 있습니다.
CSS를 사랑하고, CSS를 배우고, 웹사이트 구축은 당신에게 그렇게 어려운 일처럼 보이지 않을 것입니다 =)
CSS3의 도입은 웹디자이너의 일상에 혁명적인 변화를 가져오고 있습니다. CSS3는 매일 우리를 놀라게 합니다. 이전에는 javascript로만 가능했던 일이 이제 CSS3로 쉽게 이루어집니다. 예를 들어 Text-Overflow가 있습니다.
때때로 사이트를 생성하는 과정에서 다음 줄로 이동하지 않고 동적 텍스트의 일부를 숨길 필요가 있습니다. 즉, 너비가 고정된 테이블에 긴 텍스트를 삽입합니다. 동시에 텍스트의 보이는 부분이 전부가 아니라는 것을 사용자에게 보여줄 필요가 있습니다. 숨겨진 부분도 있습니다. 줄임표(...)를 사용하여 표시할 수 있습니다.
CSS3에서는 CSS text-overflow 속성을 사용하여 이 작업을 쉽게 수행할 수 있습니다.
마크업
text-overflow: 줄임표;
의미 생략텍스트 뒤에 줄임표(...)를 추가할 수 있습니다.
text-overflow: 줄임표 속성은 다음과 같은 경우에 유용합니다.
1. 텍스트가 셀 밖으로 나갑니다.
2. 셀에 여유 공간이 있습니다: nowrap.
데이터베이스에서 회사 이름을 표시하기 위한 150px 너비의 div가 있습니다. 그러나 동시에 우리는 긴 회사 이름이 새 줄로 건너뛰어 테이블의 모양을 망치는 것을 원하지 않습니다. 즉, 150픽셀을 넘는 텍스트를 숨겨야 합니다. 우리는 또한 이에 대해 사용자에게 알리고 싶습니다. 그래서 그는 모든 제목이 표시되지 않는다는 것을 의미했습니다. 그리고 마우스를 가져가면 모든 텍스트를 표시하고 싶습니다.
CSS3로 이 작업을 수행하는 방법을 살펴보겠습니다.
회사 랩 ul li (
text-overflow: 줄임표;
오버플로: 숨김;
공백:nowrap; )
- 회사 이름
- 인베스트넷 자산운용
- 러셀 인베스트먼트
- 노스웨스턴 상호 금융 네트워크
- ING금융네트웍스
브라우저 지원
브라우저 지원을 통해 이 속성에는 작은 뉘앙스가 있습니다. firefox를 제외한 모든 것이 올바르게 표시됩니다. 하지만 다행히도 이 문제에 대한 해결책이 있습니다!
Firefox의 줄임표
안타깝게도 Firefox의 gecko(페이지 렌더링 엔진)는 이 기능을 지원하지 않습니다. 그러나이 브라우저는 XBL을 지원하므로 이러한 상황에서 벗어날 수 있습니다.
게코 Mozilla Firefox, Netscape 및 기타 브라우저의 무료 웹 페이지 디스플레이 엔진(영어 레이아웃 엔진)입니다. 이전 이름은 "Raptor" 및 "NGLayout"입니다. Gecko의 주요 개념은 HTML, CSS, W3C DOM, XML 1.0 및 JavaScript와 같은 개방형 웹 표준을 지원하는 것입니다. 또 다른 개념은 크로스 플랫폼입니다. Gecko는 현재 Linux, Mac OS X, FreeBSD 및 Microsoft Windows 운영 체제와 Solaris, HP-UX, AIX, Irix, OS/2, OpenVMS, BeOS, Amiga 등에서 실행됩니다.
Firefox에서 줄임표를 표시하려면 스타일시트에 한 줄을 추가해야 합니다.
속성을 비활성화하려면 다음을 추가하십시오.
moz-binding: url("bindings.xml#none");
다음 단계는 스타일 시트가 저장된 동일한 위치에 bindings.xml 파일을 만드는 것입니다. 이를 위해 모든 텍스트 편집기를 사용할 수 있습니다! 아래 코드를 복사하고 파일 이름을 bindings.xml로 지정합니다.
var strings= this.textContent.split(/\s+/g)
if(!strings[ 0 ]) strings.shift()
if(!strings[ strings.length - 1 ]) strings.pop()
this.value=strings.join(" ")
this.display=strings.length ? "" : "없음"
모든 브라우저에 대한 최종 코드
회사 랩 ul li (
text-overflow: 줄임표;
-o-텍스트 오버플로: 줄임표;
-moz-binding: url("bindings.xml#ellipsis");
공백: nowrap;
오버플로: 숨김;
}
CSS3는 최소한의 코드로 이전에 본 적이 없는 웹 사이트를 만드는 전 세계 웹 디자이너의 최고의 도구가 되고 있습니다. 이전에는 Photoshop 또는 javascript로만 가능했던 간단한 한 줄 솔루션이 있습니다. 오늘 CSS3 및 HTML5의 강력한 기능을 탐색하기 시작하면 후회하지 않을 것입니다!
번역가의 회색 덩어리에서 눈에 띄고 독자 여러분의 동정을 얻으려면 제 수업이 끝날 때 현명한 생각과 격언이있을 것입니다. 이 줄에 있는 모든 사람들은 자신만의 무언가를 찾을 것입니다 :)
바꿀 수 없는 것은 품위 있게 참으십시오.
고정된 높이와 너비의 블록 안에 표시해야 하는 임의 길이의 텍스트가 있습니다. 이 경우 텍스트가 완전히 맞지 않으면 지정된 블록에 완전히 맞는 텍스트 조각이 표시되어야 하며 그 후에 줄임표가 설정됩니다.
그러한 작업은 매우 일반적이며 동시에 보이는 것처럼 사소하지 않습니다.
CSS의 한 줄 텍스트에 대한 변형
이 경우 text-overflow: ellipsis 속성을 사용할 수 있습니다. 이 경우 컨테이너에 다음 속성이 있어야 합니다. 과다동일한 숨겨진또는 클립
블록(너비: 250px ; 공백: nowrap ; 오버플로우: 숨김 ; 텍스트 오버플로우: 줄임표 ; )
CSS의 여러 줄 텍스트에 대한 변형
CSS 속성을 사용하여 여러 줄 텍스트를 자르는 첫 번째 방법은 의사 요소를 적용하는 것입니다. :전에그리고 :후에. HTML 마크업을 시작해 봅시다
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
이제 속성 자체
상자(오버플로우: 숨김 ; 높이: 200px ; 너비: 300px ; 선높이: 25px ; ) .box :before( 내용: "" ; float: 왼쪽 ; 너비: 5px ; 높이: 200px ; ) .box > * :first -child ( float : 오른쪽 ; 너비 : 100% ; margin-left : -5px ; ) .box :after ( 내용 : "\02026" ; 상자 크기 조정 : 내용 상자 ; float : 오른쪽 ; 위치 : 상대 ; 상단 : -25px ; 왼쪽: 100% ; 너비: 3em ; 여백 왼쪽: -3em ; 패딩 오른쪽: 5px ; 텍스트 정렬: 오른쪽 ; 배경 크기: 100% 100% ; 배경: 선형 그라데이션(오른쪽으로, rgba (255 , 255 , 255 , 0 ), 흰색 50% , 흰색 ); )
또 다른 방법은 여러 줄 문자의 열 너비를 설정하는 열 너비 속성을 사용하는 것입니다. 사실, 이 방법을 사용할 때 끝에 줄임표를 설치하는 것은 작동하지 않습니다. HTML:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.블록(넘침: 숨김 ; 높이: 200px ; 너비: 300px ; )
CSS에서 여러 줄 텍스트를 해결하는 세 번째 방법은 브라우저용입니다. 웹킷. 그 안에서 접두사를 사용하여 여러 특정 속성을 한 번에 사용해야 합니다. -웹킷. 주요 기능은 -webkit-line-clamp로 블록에 표시할 줄 수를 지정할 수 있습니다. 솔루션은 아름답지만 제한된 브라우저 그룹에서 작동하기 때문에 다소 제한적입니다.
블록(오버플로우: 숨김 ; 텍스트 오버플로우: 줄임표 ; 디스플레이: -webkit-box ; -webkit-line-clamp: 2 ; -webkit-box-orient: 수직 ; )
JavaScript의 여러 줄 텍스트에 대한 변형
여기에 추가로 보이지 않는 블록이 사용되는데, 여기에는 텍스트가 처음에 배치된 후 이 블록의 높이가 원하는 블록의 높이보다 작거나 같을 때까지 한 번에 한 문자씩 삭제됩니다. 그리고 마지막에는 텍스트가 원래 블록으로 이동됩니다.
var 블록 = 문서 . querySelector(".block" ), 텍스트 = 블록 . innerHTML , 복제 = 문서 . createElement("div"); 클론. 스타일. 위치 = "절대" ; 클론. 스타일. 가시성 = "숨김" ; 클론. 스타일. 너비 = 블록 . 클라이언트 너비 + "px" ; 클론. innerHTML = 텍스트 ; 문서. 몸 . appendChild(클론); 변수 l = 텍스트 . 길이 - 1 ; for (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l ) ( clone . innerHTML = text . substring (0 , l ) + "..." ; ) 블록. innerHTML = 클론 . innerHTML ;
이것은 jQuery용 플러그인 형식입니다.
(function ($) ( var truncate = function (el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( 위치: "절대" , 가시성: "숨김" , 높이: "자동" )); el .after (복제); var l = 텍스트 . 길이 - 1 ; for (; l >= 0 && 복제 . 높이 () > 높이 ; -- l ) ( clone . text (text . substring (0 , l ) + "..." ); ) el . text (clone . text ()); clone . remove (); ); $ . fn . truncateText = function () ( return this . each (function () ( truncate ($ (this )); )); ); )(jQuery ));