CSS 스타일에서 많은 사람들은 두 가지 속성, 즉 텍스트 오버플로와 텍스트 줄바꿈을 구분하지 못합니다. 그러면 word-wrap 및 text-overflow 속성은 무엇일까요? word-wrap 및 text-overflow 속성을 요약해 보겠습니다.
1: word-wrap 강제 줄 바꿈 속성
css3에서는 word-wrap 속성을 사용하여 텍스트의 길이를 결정할 수 있습니다. 긴 단어의 문자열과 URL, 그리고 다음 줄로 변경될 수 있는지 여부 Word-wrap에는 Normal과 break-word라는 두 가지 값이 있습니다. Normal은 기본값을 나타내며 두 번째는 길이를 설정하는 것입니다. URL을 삭제하고 줄바꿈을 강제합니다.
예:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 word-wrap属性</title> <style type="text/css"> #lvye { width:200px; height:120px; border:1px solid gray; } </style> </head> <body> <div id="lvye">Welcome to the Chinese website, where there is endless PHP knowledge to let you roam in the sea of knowledge.http://www.php.cn/div-tutorial-275623.html</div> </body> </html>
브라우저에서 위 코드의 미리보기 효과:
#🎜🎜 #div에 word-wrap:break-word;를 추가하면 강제로 줄바꿈이 발생합니다. 단어가 너무 길면 범위를 초과하게 됩니다. 웹사이트를 만들때 기본값만 선택하면 됩니다.2: text-overflow 텍스트 오버플로 속성
웹 페이지를 미리 볼 때 항상 이 현상을 볼 수 있습니다. 텍스트가 일정 범위를 초과하면 타원 형태로 표시되며, 추가 텍스트는 표시되지 않습니다. 이 설정은 실제로 사용자에게 더 좋으며 사용자가 더 많은 콘텐츠를 아는 데 도움이 될 수 있습니다. 중복된 내용을 숨기려면 text-overflow 속성을 사용할 수 있습니다. 일반적으로 text-overflow에도 두 가지 값이 있습니다. 첫 번째 경우는 텍스트가 넘치고 줄임표가 나타나는 경우입니다. 다른 하나는 텍스트가 오버플로되는 경우이며 오버플로되는 부분은 표시되지 않습니다. text-overflow 구문은 다음과 같습니다.text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 text-overflow属性</title> <style type="text/css"> #div1 { width:200px; height:100px; border:1px solid gray; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } </style> </head> <body> <div id="div1">php是最好的语言,欢迎大家学习交流</div> </body> </html>
CSS 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어에 주목하세요. 웹사이트.
위 내용은 단어 줄 바꿈과 텍스트 오버플로의 차이점은 무엇입니까? 두 가지 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!