>웹 프론트엔드 >프런트엔드 Q&A >HTML에서 줄 바꿈 없이 영어 단어를 표시하는 방법

HTML에서 줄 바꿈 없이 영어 단어를 표시하는 방법

WBOY
WBOY원래의
2022-03-28 10:15:394487검색

줄 바꿈 없이 HTML에서 영어 단어를 표시하는 방법: 1. word-break 속성을 사용하여 "word-break:keep-all; 스타일을 영어 단어 요소에 추가합니다. 2. word-wrap 속성을 사용하여 영어 단어 요소 "word-wrap:normal;" 스타일이면 충분합니다.

HTML에서 줄 바꿈 없이 영어 단어를 표시하는 방법

이 문서의 운영 환경: Windows 10 시스템, html5 버전, Dell G3 컴퓨터

줄 바꿈 없이 영어 단어를 표시하는 방법

1. word-break 속성 자동 줄바꿈 처리 방법을 지정합니다.

word-break 속성을 사용하면 브라우저가 임의 위치에서 줄 바꿈을 구현할 수 있습니다.

Syntax

word-break: normal|break-all|keep-all;
  • normal 브라우저의 기본 줄을 사용합니다. break 규칙.all 단어 내에서 줄바꿈을 허용합니다.

  • keep-all 반자 공백이나 하이픈에서만 줄바꿈을 할 수 있습니다.

  • <html>
    <head>
    </head>
    <body>
    <p style="width:11em;border:1px solid #000000;word-break:keep-all;">This is a veryveryveryvery veryveryveryveryveryvery long paragraph.</p>
    <p style="width:11em;border:1px solid #000000;word-break:break-all;">This is a veryveryveryvery veryveryveryveryveryvery long paragraph.</p>
    </body>
    </html>
  • 출력 결과:


2. word-wrap 속성을 사용하면 긴 단어나 URL 주소를 다음 줄로 넘길 수 있습니다.

Syntax

word-wrap: normal|break-word;
HTML에서 줄 바꿈 없이 영어 단어를 표시하는 방법normal 허용되는 하이픈 위치에서만 줄 바꿈(브라우저에서는 기본 처리 유지)

줄 바꿈 예제는 다음과 같습니다.

<html>
<head>
</head>
<body>
<p style="width:11em;border:1px solid #000000;word-wrap:normal;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>

출력 결과:

추천 튜토리얼: "

html 비디오 튜토리얼

"

위 내용은 HTML에서 줄 바꿈 없이 영어 단어를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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