웹 페이지의 텍스트에 자동 줄 바꿈을 설정하는 방법

이번에는 웹 페이지에서 텍스트 자동 줄 바꿈을 설정하는 방법을 보여 드리겠습니다. 웹 페이지에서 텍스트 자동 줄 바꿈을 설정할 때 주의 사항은 무엇입니까? 웹 페이지에서는 텍스트의 한 부분을 표시하는데 사용되지만, 텍스트의 길이와 내용은 미리 알 수 없습니다. 이때는 텍스트를 표시하기 위해 주로 fill div나 pre를 사용합니다.

div 요소를 사용할 때 너비를 결정하고 다음 두 가지 속성을 추가하여 div에 채워진 텍스트가 자동으로 줄 바꿈되도록 합니다.

word-wrap: break-word;   //word-wrap 属性允许长单词或 URL 地址换行到下一行。//break-word在长单词或 URL 地址内部进行换行。word-break: break-all;//word-break 属性规定自动换行的处理方法。

pre 요소를 사용할 때 마찬가지로 다음 두 가지 속성을 추가하면 그 안의 텍스트가 자동으로 줄바꿈됩니다.

white-space: pre-wrap;    //pre-wrap保留空白符序列，但是正常地进行换行。word-break: break-all;
word-wrap: break-word;

우리 모두는 텍스트나 다른 요소로 채워질 수 있는 div에 익숙합니다. 그러나 텍스트가 div에 배치되면 공백, 캐리지 리턴 등의 원래 형식을 유지할 수 없는 경우가 많습니다.

pre 요소는 미리 서식이 지정된 텍스트를 정의합니다. pre 요소에 포함된 텍스트는 일반적으로 공백과 줄 바꿈을 유지합니다. 텍스트도 고정 너비 글꼴로 렌더링됩니다.

pre 태그의 일반적인 용도는 컴퓨터 소스 코드를 나타내는 것입니다.

단락 구분을 유발할 수 있는 태그(예: 제목, p 및 주소 태그)는 pre로 정의된 블록에 포함되어서는 안 됩니다. 일부 브라우저는 단락 끝 태그를 단순한 줄 바꿈으로 해석하지만 이

동작

은 모든 브라우저에서 동일하지 않습니다. 사전 요소에 허용되는 텍스트에는 물리적 스타일과 콘텐츠 기반 스타일 변형은 물론 링크, 이미지, 가로 구분선이 포함될 수 있습니다. pre 블록에 다른 태그(예: 태그)를 배치할 때 HTML/XHTML 문서의 다른 부분에 배치된 것처럼 처리하십시오.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

React의 버튼에 이벤트를 추가하는 방법

select를 사용하여 선택한 값을 얻는 방법

React에서 html을 div로 설정

위 내용은 웹 페이지의 텍스트에 자동 줄 바꿈을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!