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.//m.sbmmt.com/div-tutorial-275623.html</div>
</body>
</html>브라우저에서 위 코드의 미리보기 효과:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!