CSS의 오버플로 숨기기(overflow) 예제에 대한 자세한 설명-CSS 튜토리얼-php.cn

WEB 프론트엔드 개발에서 페이지의 아름다움에 영향을 미치는 DIV의 콘텐츠 오버플로를 자주 접하게 됩니다. 그러면 어떻게 오버플로를 숨길 수 있을까요? 오늘은 CSS에서 overflow를 떠올릴 것입니다. CSS에서 오버플로 숨김(overflow)에 대한 자세한 예시를 소개해드리겠습니다!

오버플로 속성 설명:

버전: CSS2 호환성: IE4+ NS6+ 상속: 없음
구문:

overflow : visible | auto | hidden | scroll

로그인 후 복사

관련 매개변수 설명은 다음과 같습니다.

visible:: 내용을 자르거나 스크롤 막대를 추가하지 마세요. 이 기본값이 명시적으로 선언되면 개체는 개체가 포함된 창이나 프레임의 크기에 맞게 잘립니다. 그리고 클립 속성 설정이 무효화됩니다.
auto: body 객체와 textrea의 기본값입니다. 콘텐츠를 자르고 필요할 때 스크롤바를 추가하세요.
숨김: 개체의 크기를 초과하는 콘텐츠를 표시하지 마세요.
스크롤: 항상 스크롤바를 표시합니다.

사용 방법 및 핵심 사항:

◎ 개체의 콘텐츠가 지정된 높이와 너비를 초과하는 경우 콘텐츠를 검색하거나 관리하는 방법을 설정합니다.
◎ 텍스트 영역 개체를 숨겨진 값으로 설정하면 스크롤 막대가 숨겨집니다.
◎ 테이블의 경우 table-layout 속성이 고정으로 설정되면 td 객체는 기본값이 숨겨진 오버플로 속성을 지원합니다. 숨김, 스크롤 또는 자동으로 설정하면 td 크기를 초과하는 콘텐츠가 잘립니다. 표시로 설정하면 ◎의 오른쪽이나 왼쪽 셀에 추가 텍스트가 넘치게 됩니다(direction 속성 설정에 따라 다름).
◎ IE5부터 MAC 플랫폼에서 이 속성을 사용할 수 있습니다. 해당 스크립트 기능은 오버플로입니다.

예:

body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }

로그인 후 복사

text-overflow버전: IE6+ 독점 속성 상속: 없음

div 오버플로 숨겨진 div 텍스트 오버플로는 점(줄임표)으로 대체됩니다.
div 레이아웃에서는 콘텐츠가 컨테이너를 오버플로하고 제한을 초과했습니다. 컨테이너의 너비가 제한되면 어떻게 해야 합니까? 너무 혼란스러워서 모아서 정리해보니 내용이 컨테이너를 초과하면 초과된 부분에 줄임표가 표시되는 것을 발견했습니다. 이 방법은 문제를 해결할 뿐만 아니라 매우 아름답습니다. 더 말하지 말고 관심 있는 친구들이 참고하면 됩니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"> 
<head profile="http://www.w3.org/2000/08/w3c-synd/#"> 
<meta http-equiv="content-language" content="zh-cn" /> 
<meta http-equiv="content-type" content="text/html;charset=gb2312" /> 
<title>div中溢出文字用点代替的代码</title> 
<style type="text/css"> 
/*<![CDATA[*/ 
li { 
width:200px; 
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden; 
} 
/*]]>*/ 
</style> 
</head> 
<body> 
<ul> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
</body> 
</html>

로그인 후 복사

TD도 오버플로되어 디스플레이를 숨길 수 있습니다

아마 이 글에 이름을 이렇게 붙이자마자 누군가는 이렇게 물을 것입니다. 왜 아직도 주목하고 있나요? 테이블? 그건 이미 오래된 것입니다... 서둘러서 Xhtml... div... ul이 좋습니다...ol이 좋습니다...dl이 좋습니다... 끝났습니다. 다른 것이 무엇인지 모르겠습니다. 완료.

테이블이 정말 낡았나요? 테이블을 정말 이해하시나요? 테이블 사용법을 정말로 알고 있나요?

말싸움을 시작하는 것은 우리의 일이 아니며 시간이 충분한 사람들에게 맡기십시오.

　 주제로 돌아가기:

　 누군가가 DataGrid를 시뮬레이션하기 위해 테이블을 사용할 때 고정 너비를 초과하는 td의 텍스트를 숨길 수 없지만 바로 줄 바꿈하는 이유가 무엇인지 물었던 적이 기억나지 않습니다.

　예, 실제로는 다음과 같은 경우입니다:

<style type="text/css">
table {width:500px;;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
td {white-space:nowrap;overflow:hidden;}
</style>
<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1">神舟 优雅Q400N</td>
<td class="col2">优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td class="col3">迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</table>

로그인 후 복사

위 코드를 실행하면 고정 너비를 초과하는 셀의 텍스트가 숨겨지지 않고 새 줄에 표시됩니다. .분명히 이것은 내 원래 의도가 아닙니다.

이는 테이블의 기능인 것 같습니다. 최종적으로는 공백:nowrap입니다. . 작동하지 않아서 Overflow:hidden이 잘못된 것 같습니다. {注：如果是一连串的无意义字符则可生效，例如：aaaaaaaaaaaaaaaaaaaaaaaaaaaa，这个候就需要{white-space:nowrap}来强管它에서 一行内표시, 이 일련의 a는 한 단어로 인식되고 줄 바꿈이 발생하지 않으므로 .col1의 너비를 초과하는 a는 숨겨집니다.}

　　[해결책 1:]

　 나중에 누군가가 백분율 너비를 사용한다고 언급했습니다. 충분합니다. 테스트 후에는 실제로 가능합니다. 첫 번째 단락에서 몇 줄의 스타일을 약간 수정하고 나머지는 변경하지 않고 그대로 두세요.

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

로그인 후 복사

수정된 코드를 실행하면 너비를 초과하는 텍스트가 다음과 같이 표시됩니다. 정말 숨겨져 있습니다. 원하시면 효과를 얻을 수 있을 것 같습니다.

사실 백분율 너비를 사용하면 실제로 텍스트 숨김 문제를 해결할 수 있지만 이것이 최선의 해결책은 아닌 것 같습니다. 때로는 백분율 너비가 아닌 고정 너비가 필요하기 때문입니다.

이 모든 것의 근본은 셀의 텍스트를 줄 바꿈 없이 한 줄로 표시하는 방법입니다.

　　[해결책 2:]

　 이 요구 사항을 충족하려면 스타일을 사용하는 것 외에도 오랫동안 사용되지 않은 태그 를 생각할 수도 있습니다. 내용을 한 줄에 표시합니다. 위 코드를 다음과 같이 수정하고 나머지는 변경하지 않습니다.

<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1"><nobr>神舟 优雅Q400N</nobr></td>
<td class="col2"><nobr>优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</nobr></td>
<td class="col3"><nobr>迅驰4平台，突出的性价比，漂亮的外观</nobr></td>
</tr>
</table>

로그인 후 복사

做了这个修改，会发现，效果确实达到，是不是该兴奋呢？不，这似乎还不是最佳的解决方案，因为毕竟使用了一个许久不用且不推荐使用的元素标记，这多少让人觉得有点不爽。

　　沿着这个思路，我换了一个角度来考虑这个问题，发现问题迎刃而解。

　　既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap，那么我们在固定宽度的单元格内再加一个标记元素呢？

最佳方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回头来看看Table：TD也玩overflow:hidden</title>
<style type="text/css">
table {width:500px;;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="测试">
<thead>
<tr>
<th class="col1"><strong>产品名称</strong></th>
<th class="col2"><strong>产品介绍</strong></th>
<th class="col3"><strong>产品备注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>神舟 优雅Q400N</td>
<td>优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td>迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</tbody>
</table>
</body>
</html>

로그인 후 복사

运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。

总结：

本文详细介绍了CSS中溢出隐藏（overflow）的实例详解，相信下伙伴么可以进一步的了解！还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文

相关推荐：

关于溢出隐藏的详细介绍

分享文字溢出隐藏实例

溢出隐藏：最全的利用css解决内容溢出问题的几种方案

위 내용은 CSS의 오버플로 숨기기(overflow) 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!