CSS에서 콘텐츠가 넘치지 않게 하는 방법
- 藏色散人원래의
- 2023-01-31 09:34:552737검색
CSS에서 "text-overflow" 속성을 사용하면 콘텐츠가 오버플로되는 것을 방지할 수 있습니다. 이 속성은 텍스트가 포함된 요소를 오버플로할 때 발생하는 상황을 지정합니다. 구문은 "text-overflow: 클립 | 줄임표 | 줄임표-단어"입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터
CSS에서 콘텐츠가 오버플로되는 것을 방지하는 방법은 무엇입니까?
text-overflow 속성을 사용하여 구현되었습니다.
text-overflow 속성은 텍스트가 포함된 요소를 오버플로할 때 발생하는 상황을 지정합니다.
1. text-overflow 구문:
text-overflow : clip | ellipsis | ellipsis-word
text-overflow 매개변수 값 및 설명:
clip : 不显示省略标记（...），而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记（...） ellipsis-word : 当对象内文本溢出时显示省略标记（...）(word) white-space:nowrap;/*禁止换行,为text-overflow作准备*/ overflow:hidden; /*禁止文本溢出显示,为text-overflow作准备*/
text-ellipsis는 특수 스타일입니다. 관련 설명은 다음과 같습니다. Overflows 생략 표시를 표시할지 여부입니다. 다른 스타일 속성 정의는 없습니다. 오버플로 시 타원을 생성하는 효과를 얻으려면 텍스트를 한 줄에 강제로 표시하고(white-space:nowrap) 오버플로되는 내용을 숨기도록(overflow:hidden) 정의해야 합니다. 이 방법으로만 효과를 얻을 수 있습니다. 넘치는 텍스트에 타원을 표시하는 것이 가능합니다.
간단히 이해하자면 텍스트를 한 줄로 제한하고(공백: nowrap;), 이 줄이 제한되어 있는지(너비), 오버플로 부분을 숨겨야 한다는 것입니다(오버플로: 숨김;). (text-overflow: ellipsis)
호환성:
2. 공백 사용
공백 속성은 레이아웃 프로세스 중 요소의 공백 문자를 처리하는 방법을 선언합니다. (여기서 공백 문자는 키보드에서 입력하는 공백 또는 캐리지 리턴을 참조해야 합니다. 왜냐하면 또는
로 설정된 공백에 관계없이 공백 또는 캐리지 리턴이 있기 때문입니다.)
다음 wschool 값:
normal 기본값. 브라우저는 공백을 무시합니다.
사전 공백은 브라우저에 의해 보존됩니다. 이는 HTML의
태그처럼 작동합니다. <p>nowrap 텍스트는 줄바꿈되지 않으며 <br> 태그가 나타날 때까지 같은 줄에 계속 표시됩니다. </p><p>pre-wrap 공백 시퀀스를 유지하지만 정상적으로 래핑합니다. </p><p>pre-line은 공백 시퀀스를 병합하지만 개행은 유지합니다. </p><p>inherit는 공백 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. </p><pre class="brush:php;toolbar:false"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>text-overflow防止文本溢出</TITLE>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style type="text/css">
body{background:#fff; word-break:break-all;
word-wrap:break-word; font-size:12px; font-family: Arial,"宋体",Verdana; line-height:150%; margin:0px; paliing:0px; color:#404040; }
input{ font-family:Arial;}
div{margin:0; paliing:0;}
h1,h2,h3,h4,h5,h6,ul,li,dl,dt,li,form,img,p{margin:0; padding:0; border:none; list-style-type:none;}
.con_box{
margin:10px;
width:240px;
border:solid 1px #ccc;
}
h3{
padding:0 8px;
line-height:30px;
text-align:left;
font-size:13px;
border-bottom:1px solid #efefef;
}
ul{padding:5px 0;}
li{
font-size:0.78em;
height:1.5em;
width:224px;
padding:2px 8px;
margin:2px 0;
white-space:nowrap;/*禁止换行,为text-overflow作准备*/
overflow:hidden; /*禁止文本溢出显示,为text-overflow作准备*/
text-overflow:ellipsis;/*兼容 ie Safari (Webkit)*/
-o-text-overflow:ellipsis;/*兼容 Ｏpera*/
-moz-binding:url('ellipsis.html#ellipsis');/*兼容 Firefox*/
}
ul li:before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
vertical-align: middle;
margin-right: 7px;
margin-top: -3px;
background: #cbcbcb;
zoom: 1;
}
</style>
<BODY>
<div class="con_box">
<h3>体育新闻</h3>
<ul>
<li>皇马打巴萨计划曝光！贝帅5大杀招誓破巴萨</li>
<li>逗妹吐槽:托蒂邓肯未来是谁的？ 火箭改名过山车</li>
<li>曼联食堂趣事:狡猾的弗格森 鲁尼两遭恶搞(图)</li>
<li>C罗母队宣布永久封存C罗7号战袍(图)</li>
<li>惊!西媒曝切尔西清洗4巨星 1月豪购6400万级锋霸</li>
</ul>
</div>
</BODY>
</HTML>추천 학습: "css 동영상 튜토리얼"
위 내용은 CSS에서 콘텐츠가 넘치지 않게 하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!