CSS 오버플로 및 줄 바꿈을 처리하는 방법
- 零下一度원래의
- 2017-05-03 15:48:452907검색
1. 오버플로 처리
1 공백 처리
텍스트가 너무 길어서 컨테이너에 표시할 수 없는 경우 줄 바꿈
속성: white-space: Normal / nowrap
Normal: 브라우저 기본 설정 사용
nowrap : 줄 바꿈 없음
2, 텍스트 오버플로
오버플로 처리 방법,원하는 경우 오버플로 콘텐츠를 숨기려면 이 속성을 사용해 보세요.
참고: 이 속성은 overflow:hidden
속성 : text-overflow
값:
1, 클립 , 잘라내기, 가로채기
2, 줄임표, ... (줄임표)를 사용하여 표시되지 않는 콘텐츠를 나타냅니다.
예:<!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>, 줄 바꿈
참고: 영어에만 유효합니다. 1、긴 줄 바꿈
> 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.