> 웹 프론트엔드 > CSS 튜토리얼 > CSS는 텍스트의 지정된 너비를 초과하고 대신 타원을 사용하며 텍스트가 줄 바꿈되지 않습니다.

CSS는 텍스트의 지정된 너비를 초과하고 대신 타원을 사용하며 텍스트가 줄 바꿈되지 않습니다.

高洛峰
풀어 주다: 2017-03-13 16:41:02
원래의
1495명이 탐색했습니다.

이 글에서는 주로 소개 타원을 사용하여 텍스트의 지정된 너비를 넘어서 CSS를 대체하고 텍스트를 줄바꿈하지 않는 방법이 매우 실용적이라고 생각하여 스크립트에서 공유합니다. 참고용 홈 플랫폼

일반 텍스트 잘림(인라인 및 블록에 적용):

.text-overflow {   
    display:block;/*内联对象需加 */
    width:31em;/* 何问起 hovertree.com */
    word-break:keep-all;/* 不换行 */
    whitewhite-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
로그인 후 복사

테이블 텍스트 오버플로 정의:

테이블이 범위를 벗어난 경우 줄임표 표시

table{   
     width:em;   
     table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
 }   
 td{   
    width:%;   
    word-break:keep-all;/* 不换行 */
    whitewhite-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
로그인 후 복사

이 CSS 스타일은 한 줄의 텍스트에서만 작동한다는 점입니다. 여러 줄에 사용하려는 경우 첫 번째 줄만 작동합니다.

IE에서만 이런 식으로 "..."가 표시됩니다. 다른 브라우저에서는 텍스트가 지정된 너비를 초과하면 이를 숨깁니다.

위 내용은 CSS가 텍스트의 지정된 너비를 초과하고 텍스트가 줄바꿈되지 않는 경우 생략 부호를 사용하는 방법에 대한 소개입니다. 또한 여러분의 지원에 진심으로 감사드립니다. PHP 중국어 웹사이트!

위 내용은 CSS는 텍스트의 지정된 너비를 초과하고 대신 타원을 사용하며 텍스트가 줄 바꿈되지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿