CSS에서 콘텐츠가 넘치지 않게 하는 방법-프런트엔드 Q&A-php.cn

CSS에서 콘텐츠가 넘치지 않게 하는 방법

藏色散人

풀어 주다： 2023-01-31 09:34:55

원래의

2774명이 탐색했습니다.

CSS에서 "text-overflow" 속성을 사용하면 콘텐츠가 오버플로되는 것을 방지할 수 있습니다. 이 속성은 텍스트가 포함된 요소를 오버플로할 때 발생하는 상황을 지정합니다. 구문은 "text-overflow: 클립 | 줄임표 | 줄임표-단어"입니다.

CSS에서 콘텐츠가 넘치지 않게 하는 방법

이 튜토리얼의 운영 환경: 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)

호환성:

CSS에서 콘텐츠가 넘치지 않게 하는 방법

2. 공백 사용

공백 속성은 레이아웃 프로세스 중 요소의 공백 문자를 처리하는 방법을 선언합니다. (여기서 공백 문자는 키보드에서 입력하는 공백 또는 캐리지 리턴을 참조해야 합니다. 왜냐하면 또는
로 설정된 공백에 관계없이 공백 또는 캐리지 리턴이 있기 때문입니다.)

다음 wschool 값:

normal 기본값. 브라우저는 공백을 무시합니다.

사전 공백은 브라우저에 의해 보존됩니다. 이는 HTML의

 태그처럼 작동합니다. </p><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(&#39;ellipsis.html#ellipsis&#39;);/*兼容　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 중국어 웹사이트의 기타 관련 기사를 참조하세요!