CSS - 여러 텍스트 표시 줄임표를 제어합니다.

1735 단어 css

웹 페이지의 조판 수요로 인해, 일부 지나치게 긴 텍스트는 생략 번호를 붙여야 한다.예를 들어 라벨의 폭을 100px로 제한하고 폭을 초과한 부분은 신략호로 표시한다. 위 그림과 같다.
html 태그: CSS 스타일:

label { font-size: 14px ; display : block; width : 120px; white-space: nowrap ; overflow : hidden; text-overflow : ellipsis; }

설명:

라벨 폭은 반드시 설정해야 하며 실제 상황에 따라 조정할 수 있다

display:block; –일부 개별 탭, 예를 들어 a, td, label 등은overflow:hidden을 사용할 수 없기 때문에 이 속성을 설정해야 합니다

white-space:nowrap;–텍스트를 한 줄에 강제로 표시합니다.

overflow:hidden;–초과된 텍스트 숨기기

text-overflow:ellipsis;–초과된 텍스트는 줄임표로 대체

text-overflow 속성 값: clip: 텍스트 캡처 ellipsis: 텍스트를 캡처할 때 ellipsis-word 대신 생략 번호를 사용합니다: 생략 번호 다음에 마지막 문자를 표시합니다
- IE, Webkit 커널 브라우저(chrome,safari,360 및 소견의 고속 모드):text-overflow - Opera:-o-text-overflow –Firefox: 지원하지 않음
또한 숨겨진 텍스트를 볼 수 있도록 탭에title 속성을 추가할 수 있습니다. 속성 값은 이 텍스트입니다.이 속성을 추가하면 마우스 포인터가 탭 위로 이동할 때 텍스트의 모든 내용을 표시합니다

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?

장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다