단어 줄 바꿈과 텍스트 오버플로의 차이점은 무엇입니까? 두 가지 속성에 대한 자세한 설명-CSS 튜토리얼-php.cn

단어 줄 바꿈과 텍스트 오버플로의 차이점은 무엇입니까? 두 가지 속성에 대한 자세한 설명

云罗郡主

풀어 주다： 2018-10-26 16:24:11

원래의

4486명이 탐색했습니다.

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>

로그인 후 복사

표시 효과는 다음과 같습니다.

단어 줄 바꿈과 텍스트 오버플로의 차이점은 무엇입니까? 두 가지 속성에 대한 자세한 설명