> 웹 프론트엔드 > CSS 튜토리얼 > CSS가 영어와 연속 숫자의 자동 줄 바꿈을 구현하는 방법에 대한 자세한 설명

CSS가 영어와 연속 숫자의 자동 줄 바꿈을 구현하는 방법에 대한 자세한 설명

黄舟
풀어 주다: 2017-07-22 10:11:54
원래의
1879명이 탐색했습니다.

p 및 p와 같은 블록 수준 요소의 경우

  일반 텍스트 줄 바꿈(아시아 텍스트 및 비아시아 텍스트) 요소에는 기본 공백: 일반이 있으며 정의된 너비 이후에 자동으로 줄 바꿈됩니다.

 html<p id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</p>
  css#wrap{white-space:normal; width:200px; }
로그인 후 복사

  1. (IE 브라우저) 연속된 영어 문자와 아라비아 숫자, word-wrap: break-word; 또는 word-break:break-all;을 사용하여 강제 줄 바꿈

 #wrap{word-break:break-all; width:200px;}
로그인 후 복사

 또는

#wrap{word-wrap:break-word; width:200px;}
  <p id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</p>
로그인 후 복사

  효과: 줄바꿈 가능 달성

  2. (Firefox 브라우저) 연속되는 영어 문자와 아라비아 숫자의 줄 바꿈. 모든 Firefox 버전에서는 이 문제를 해결하지 못했습니다. 경계 너머로 문자를 숨기거나 컨테이너에 스크롤 막대를 추가하는 것뿐입니다.

#wrap{word-break:break-all; width:200px; overflow:auto;}
  <p id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</p>
로그인 후 복사

효과: 컨테이너는 정상이고 내용은 숨겨집니다

테이블용

  1. (IE 브라우저) 테이블 레이아웃 사용: 테이블 너비를 강제로 고정, 중복된 내용은 숨겨짐

<table style="table-layout:fixed" width="200">  
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
로그인 후 복사


  효과: 중복 내용 숨기기

  ​​2. (IE 브라우저) 테이블의 너비를 강제로 설정하고, 내부 td를 사용합니다. word-break: break-all 또는 word-wrap: break-word line break;

<table width="200" style="table-layout:fixed;">  
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>
로그인 후 복사

효과: 줄 바꿈 가능

3. (IE 브라우저) td, th에 p, p 등을 중첩하려면 위에서 언급한 p, p의 줄바꿈 ​​방법을 사용합니다

  4. (Firefox 브라우저) 사용 table-layout: 테이블의 너비와 내부 td를 강제로 적용하려면 word -break: break-all; 또는 word-wrap: break-word line break를 사용하여 초과분을 숨깁니다. content, here Overflow:auto; 작동하지 않습니다

<table style="table-layout:fixed" width="200">  
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
로그인 후 복사


  효과: 내용 이상 숨기기

 5 .(Firefox 브라우저) td, th에서 Nest p, p 등을 처리하고 위에서 언급한 방법을 사용합니다. Firefox를 사용하여 코드 상자를 실행합니다. 마지막으로 이런 일이 일어날 가능성은 매우 적습니다.

위 내용은 CSS가 영어와 연속 숫자의 자동 줄 바꿈을 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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