html 태그의 div, td, p와 같은 컨테이너에서 강제 줄 바꿈 및 줄 바꿈 없음 구현

黄舟
풀어 주다: 2017-07-03 12:00:10
원래의
3216명이 탐색했습니다.

p, td, p 등과 같은 컨테이너에서 줄 바꿈을 강제로 수행하거나 줄 바꿈을 하지 않는 것이 어떤 경우에는 매우 실용적입니다. 다음 문서에는 관련 지식이 정리되어 있으며 필요한 친구는 이를 참조할 수 있습니다. 1. 줄 바꿈을 강제로 사용하지 않고 줄임표로 끝냅니다.

<p style="width:100px;overflow:hidden;
white-space
:nowrap;
text-overflow
:ellipsis;" > 
你好朋友朋友朋友我为什么不能看到效果啊 
</p>
로그인 후 복사

2. CSS는 자동으로 줄바꿈합니다

p{ 
word-wrap
: break-word; 
word-break
: normal; }
로그인 후 복사


3. CSS는 영어 단어를 강제로 줄 바꿈합니다

p{word-break:break-all;}
로그인 후 복사


p가 중첩되어 있고 내용에 따라 내부 p가 자동으로 줄 바꿈되도록 하려면 다음을 수행하세요. 외부 레이어의 p 너비만 설정하면 white-spance:nowrap을 사용할 수 있습니다.

word-break:break-all 및 word-wrap:break-word는 모두 p와 같은 컨테이너의 내용을 자동으로 줄 바꿈합니다.

차이는 다음과 같습니다.

1, word-break:break-all p 너비가 200px이면 내용이 자동으로 200px로 줄 바꿈됩니다. 줄 끝에 긴 영어 단어(축하합니다 등)가 있으면 단어를 자르고 conra(앞부분)로 바꿉니다. 축하합니다) 다음은 행동 tulation(conguatulation)의 백엔드 부분입니다.

2. word-wrap:break-word 예시는 위와 동일하지만, 전체 단어를 표시할 만큼 줄 끝이 넓지 않은 경우 차이점이 있습니다. 단어를 자르지 않고 자동으로 전체 단어를 다음 줄에 넣습니다.

3, word-break;break-all 지원 버전: IE5 이상 이 동작은 아시아 언어의 일반적인 동작과 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.

WORD-WRAP:break-word 지원 버전: IE5.5 이상 콘텐츠는 경계 내에서 래핑됩니다.

필요한 경우 단어 분리도 발생합니다. 테이블이 늘어나는 것을 방지하기 위해 자동으로 포장됩니다.

word-break : normal | break-all | keep-all
로그인 후 복사

매개변수:

normal: 아시아 및 비아시아 언어의 텍스트 규칙에 따라 단어 내에서 줄 바꿈을 허용합니다. ​

break-all: 이 동작은 아시아 언어의 일반적인 동작과 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.

keep-all : 모든 비아시아 언어에 대한 일반 값과 ​​동일합니다. 중국어, 한국어, 일본어의 경우 단어 구분이 허용되지 않습니다. 소량의 아시아 텍스트가 포함된 비아시아 텍스트에 적합한 구문:

word-wrap : Normal | break-word

매개변수:

normal : 콘텐츠가 지정된 컨테이너 경계를 깨도록 허용

break-word : Content 경계 내에서 래핑됩니다. 필요한 경우 word-break도 발생합니다. 설명: 현재 줄이 지정된 컨테이너의 경계를 초과할 때 줄을 끊을지 여부를 설정하거나 검색합니다.

에 해당하는 스크립트 기능은 wordWrap입니다. 제가 쓴 다른 책들도 참조해 주세요. 구문: table-layout : auto | 고정 매개변수: auto : 기본 자동 알고리즘. 레이아웃은 각 셀의 내용을 기반으로 합니다. 각 셀을 읽고 계산할 때까지 테이블은 표시되지 않습니다. 매우 느림 수정: 레이아웃 알고리즘 수정. 이 알고리즘에서 가로 레이아웃은 테이블 너비, 테이블 테두리 너비, 셀 간격, 열 너비만을 기준으로 하며 테이블의 내용과는 아무런 관련이 없습니다. 또는 테이블의 레이아웃 알고리즘을 검색합니다. 해당 스크립트 속성은 tableLayout입니다.

제안: 단어 분리에 대한 3C 감지는 Baidu 스냅샷에서도 문제를 일으킬 수 있는 문제를 표시합니다. 이 속성 OPERA FIREFOX 브라우저는 단어 분리 속성을 대신 사용할 수 있습니다. FireFox에서 사용할 수 있습니다. 줄 바꿈은 IE와 IE에서 올바르게 수행될 수 있으며, 단어 사이의 공백을 사용하여 공백을 대체할 수 없다는 점에 유의하십시오. 그렇지 않으면 줄 바꿈을 올바르게 수행할 수 없습니다.

위 내용은 html 태그의 div, td, p와 같은 컨테이너에서 강제 줄 바꿈 및 줄 바꿈 없음 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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