단어 분리 속성을 사용하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

단어 분리 속성을 사용하는 방법

青灯夜游

Feb 11, 2019 pm 03:17 PM

css3 자동 줄 바꿈

word-break 속성은 비CJK(중국어, 일본어, 한국어) 스크립트에 대한 줄바꿈 규칙을 지정하는 데 사용되며 자동 줄 바꿈 처리 방법을 지정합니다. word-break 속성을 사용하면 브라우저가 어떤 위치에서든 줄을 끊도록 할 수 있습니다.

단어 분리 속성을 사용하는 방법

CSS3 단어 분리 속성

기능: 단어 분리 속성은 자동 줄 바꿈 처리 방법을 지정합니다.

팁: 단어 나누기 속성을 사용하면 브라우저가 어떤 위치에서든 줄바꿈을 할 수 있습니다.

구문: 

word-break: normal|break-all|keep-all;

로그인 후 복사

normal: 브라우저의 기본 줄 바꿈 규칙을 사용합니다.

break-all: 단어 내에서 줄 바꿈을 허용합니다.

모두 유지: 반자 공백이나 하이픈에서만 줄바꿈을 사용합니다.

참고: 모든 주요 브라우저는 단어 분리 속성을 지원합니다. 그러나 Opera는 word-break 속성을 지원하지 않습니다.

CSS3 단어 분리 속성 사용의 예

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1
{
width:11em; 
border:1px solid #000000;
word-break:keep-all;
}
p.test2
{
width:11em; 
border:1px solid #000000;
word-break:break-all;
}
p.test3
{
width:11em; 
border:1px solid #000000;
word-break:keep-all;
}
p.test4
{
width:11em; 
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test3">This paragraph contains some text: The lines will break at any character.</p>
<p class="test4">This paragraph contains some text: The lines will break at any character.</p>
</body>
</html>

로그인 후 복사

렌더링:

단어 분리 속성을 사용하는 방법

이 문서에 대한 참조: https://www.html.cn/book/css/properties/text/word -break.htm

위 내용은 단어 분리 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7667

Cakephp 튜토리얼

1393

C# 튜토리얼

1206

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예) Jun 28, 2022 pm 01:39 PM

순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.

단어 자동 줄 바꿈을 취소하는 방법 Mar 19, 2024 pm 10:16 PM

Word 문서의 내용을 편집할 때 줄이 자동으로 줄바꿈될 수 있습니다. 이때 조정이 이루어지지 않으면 편집에 큰 영향을 미치고 사람들이 무슨 일이 일어나고 있는 걸까요? 사실, 눈금자의 문제입니다. 아래에서는 단어 자동 줄 바꿈을 취소하는 방법에 대한 해결 방법을 소개하겠습니다. 여러분에게 도움이 되기를 바랍니다! Word 문서를 열고 텍스트를 입력한 후 복사하여 붙여넣으려고 하면 텍스트가 새 줄로 건너뛸 수 있습니다. 이 경우 이 문제를 해결하려면 설정을 조정해야 합니다. 2. 이 문제를 해결하려면 먼저 이 문제의 원인을 알아야 합니다. 이때 도구 모음 아래에서 보기를 클릭합니다. 3. 그런 다음 아래의 "눈금자" 옵션을 클릭하세요. 4. 이때 여러 개의 원뿔형 마커가 있는 문서 위에 눈금자가 나타나는 것을 볼 수 있습니다.

CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함) Jul 19, 2022 am 11:28 AM

이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.

WPS 테이블을 자동으로 래핑하고 강제로 래핑하는 방법 Mar 20, 2024 pm 07:46 PM

일부 초보 친구의 경우 Excel의 자동 단어 줄 바꿈과 강제 단어 줄 바꿈이 아직 명확하지 않습니다. 그래서 오늘은 에디터가 엑셀 자동줄바꿈과 수동줄바꿈에 대해 알려드릴게요! Excel 자동 줄 바꿈 기능: 먼저 줄 바꿈을 적용할 셀 범위를 선택한 후 "시작" - "정렬" - "자동 줄 바꿈" 버튼을 클릭합니다. 셀의 텍스트 줄 바꿈 길이는 셀의 열 너비에 따라 달라집니다. 열 너비의 크기를 조정하면 텍스트가 자동으로 줄바꿈됩니다. Excel 강제 줄 바꿈 단축키 원하는 위치에 따라 줄 바꿈이 필요한 경우 셀을 두 번 클릭하고 줄 바꿈 내용 뒤에 커서를 놓은 다음 "Alt+Enter" 키 조합을 사용할 수 있습니다. 자동 줄 바꿈과 강제 줄 바꿈의 차이점은 여기에서 설명합니다.

공간을 차지하지 않고 CSS에서 요소를 숨기는 방법 Jun 01, 2022 pm 07:15 PM

두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.

CSS3에서 레이스 테두리를 구현하는 방법 Sep 16, 2022 pm 07:11 PM

CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.

CSS3에서 마우스를 클릭하여 이미지를 확대하는 방법 Apr 25, 2022 pm 04:52 PM

구현 방법: 1. ":active" 선택기를 사용하여 그림에 대한 마우스 클릭 상태를 선택합니다. 2. 변환 속성과 scale() 함수를 사용하여 그림 확대 효과를 얻습니다. 구문은 "img:active {transform; : scale(x축 배율, y축 배율);}".