CSS에서 콘텐츠가 넘치지 않게 하는 방법-프런트엔드 Q&A-php.cn

CSS에서 "text-overflow" 속성을 사용하면 콘텐츠가 오버플로되는 것을 방지할 수 있습니다. 이 속성은 텍스트가 포함된 요소를 오버플로할 때 발생하는 상황을 지정합니다. 구문은 "text-overflow: 클립 | 줄임표 | 줄임표-단어"입니다.

CSS에서 콘텐츠가 넘치지 않게 하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터

CSS에서 콘텐츠가 오버플로되는 것을 방지하는 방법은 무엇입니까?

text-overflow 속성을 사용하여 구현되었습니다.

text-overflow 속성은 텍스트가 포함된 요소를 오버플로할 때 발생하는 상황을 지정합니다.

1. text-overflow 구문:

text-overflow : clip | ellipsis | ellipsis-word

로그인 후 복사

text-overflow 매개변수 값 및 설명:

clip : 　不显示省略标记（...），而是简单的裁切 ellipsis : 　当对象内文本溢出时显示省略标记（...） ellipsis-word : 　当对象内文本溢出时显示省略标记（...）(word) white-space:nowrap;/*禁止换行,为text-overflow作准备*/ overflow:hidden; /*禁止文本溢出显示,为text-overflow作准备*/

로그인 후 복사

text-ellipsis는 특수 스타일입니다. 관련 설명은 다음과 같습니다. Overflows 생략 표시를 표시할지 여부입니다. 다른 스타일 속성 정의는 없습니다. 오버플로 시 타원을 생성하는 효과를 얻으려면 텍스트를 한 줄에 강제로 표시하고(white-space:nowrap) 오버플로되는 내용을 숨기도록(overflow:hidden) 정의해야 합니다. 이 방법으로만 효과를 얻을 수 있습니다. 넘치는 텍스트에 타원을 표시하는 것이 가능합니다.

간단히 이해하자면 텍스트를 한 줄로 제한하고(공백: nowrap;), 이 줄이 제한되어 있는지(너비), 오버플로 부분을 숨겨야 한다는 것입니다(오버플로: 숨김;). (text-overflow: ellipsis)

호환성:

CSS에서 콘텐츠가 넘치지 않게 하는 방법

2. 공백 사용

공백 속성은 레이아웃 프로세스 중 요소의 공백 문자를 처리하는 방법을 선언합니다. (여기서 공백 문자는 키보드에서 입력하는 공백 또는 캐리지 리턴을 참조해야 합니다. 왜냐하면 또는
로 설정된 공백에 관계없이 공백 또는 캐리지 리턴이 있기 때문입니다.)

다음 wschool 값:

normal 기본값. 브라우저는 공백을 무시합니다.

사전 공백은 브라우저에 의해 보존됩니다. 이는 HTML의

태그처럼 작동합니다.

nowrap 텍스트는 줄바꿈되지 않으며
태그가 나타날 때까지 같은 줄에 계속 표시됩니다.

pre-wrap 공백 시퀀스를 유지하지만 정상적으로 래핑합니다.

pre-line은 공백 시퀀스를 병합하지만 개행은 유지합니다.

inherit는 공백 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

   text-overflow防止文本溢出      
    体育新闻
  皇马打巴萨计划曝光！贝帅5大杀招誓破巴萨
 逗妹吐槽:托蒂邓肯未来是谁的？ 火箭改名过山车
 曼联食堂趣事:狡猾的弗格森 鲁尼两遭恶搞(图)
 C罗母队宣布永久封存C罗7号战袍(图)
 惊!西媒曝切尔西清洗4巨星 1月豪购6400万级锋霸