CSS 오버플로 및 줄 바꿈을 처리하는 방법-CSS 튜토리얼-php.cn

CSS 오버플로 및 줄 바꿈을 처리하는 방법

零下一度

풀어 주다： 2017-05-03 15:48:45

원래의

2912명이 탐색했습니다.

1. 오버플로 처리

1 공백 처리

텍스트가 너무 길어서 컨테이너에 표시할 수 없는 경우 줄 바꿈

속성: white-space: Normal / nowrap

Normal: 브라우저 기본 설정 사용

nowrap : 줄 바꿈 없음

2, 텍스트 오버플로

오버플로 처리 방법,원하는 경우 오버플로 콘텐츠를 숨기려면 이 속성을 사용해 보세요.

참고: 이 속성은 overflow:hidden

속성 : text-overflow

값

, 클립 , 잘라내기, 가로채기

, 줄임표, ... (줄임표)를 사용하여 표시되지 않는 콘텐츠를 나타냅니다.

예:

<!DOCTYPE html >
<head>
  <title>文本格式</title>
  <meta charset="utf-8" />
   <style>
     p{
        width:150px;
height:50px;
border:1px solid black;
overflow:hidden;
}
#d1{
       white-space:normal;
   text-overflow:ellipsis;
}
#d2{
       white-space:nowrap;
   text-overflow:clip;
}
#d3{
       white-space:nowrap;
   text-overflow:ellipsis;
}
   </style>
</head>
<body>
   <p id="d1">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/>
   <p id="d2">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/>
   <p id="d3">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p>
</body>
</html>

로그인 후 복사

two

, 줄 바꿈

참고: 영어에만 유효합니다.

、긴 줄 바꿈

> break-word:

단어의 구조를 파괴

2, 텍스트 줄 바꿈

word-break:

값:

일반:

break-all:

줄 바꿈을 위한 단어 구조

keep- all :

반각 상태에서 공백 아래 줄 바꿈

<!DOCTYPE html >
<head>
  <title>文本格式</title>
  <meta charset="utf-8" />
   <style>
     p{
        width:150px;
height:50px;
border:1px solid black;
}
     #d1{
       word-wrap:break-word;
}
#d2{
       word-break:break-all;
}
#d3{
       word-break:keep-all;
}
   </style>
</head>
<body>
    <p id="d1">this is a longlonglonglonglongtext,如何换行？</p><br/><br/>
<p id="d2">this is a longlonglonglonglongtext,如何换行？</p><br/><br/>
<p id="d3">this is a longlonglonglonglongtext,如何换行？</p>
</body>
</html>

로그인 후 복사

위 내용은 CSS 오버플로 및 줄 바꿈을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!