CSS div 콘텐츠를 숨기는 방법
- 藏色散人원래의
- 2023-01-28 15:12:472624검색
CSS div의 콘텐츠를 숨김 이상으로 구현하는 방법: 1. CSS 코드 "overflow:hidden;"을 사용하여 숨김 이상의 콘텐츠를 구현합니다. 2. js 코드 "var myBox = document.getElementById('demo')를 사용합니다. ; var mydemoHtml = myBox.innerHTML.slice(0, 20) +'...';" 숨기는 것 이상으로 콘텐츠를 구현하면 됩니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터
숨겨진 한도를 넘어 CSS div 콘텐츠를 숨기는 방법은 무엇입니까?
CSS - div에 있는 텍스트의 오버플로 부분이 줄임표로 표시됩니다.
div에 있는 텍스트의 오버플로 부분이 줄임표로 표시됩니다. 두 가지 해결 방법으로 요약할 수 있습니다. CSS를 사용하여 해결하고 다른 방법은 js로 해결합니다.
1. CSS를 통해 디스플레이 제어
div에 여러 줄이 표시되고, 초과 부분은 줄임표로 표시됩니다.
코드:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>例子</title>
<style>
/* 单行文字末尾省略号显示 */
.div1{
height: 100px;
width:100px;
background:green;
text-overflow: ellipsis; /* ellipsis:显示省略符号来代表被修剪的文本 string:使用给定的字符串来代表被修剪的文本*/
white-space: nowrap; /* nowrap:规定段落中的文本不进行换行 */
overflow: hidden; /*超出部分隐藏*/
}
/* 多行文字末尾省略号显示 */
.div2{
/* height: 100px; */
width:100px;
background:yellowgreen;
display: -webkit-box; /* display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-line-clamp: 5; /* -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="div1">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </div>
<div class="div2" >
嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿 </div>
</body></html>실행 결과:
2. js를 통해 디스플레이 제어
코드:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.mydiv {
width: 150px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="mydiv" id="demo">通过js操作的方法显示文字，使得末尾的文字省略号显示</div>
<script>
var myBox = document.getElementById('demo'); //直接用id获取domo对象
var mydemoHtml = myBox.innerHTML.slice(0, 20) + '......'; // slice() 方法可从已有的数组中返回选定的元素 myBox.innerHTML = mydemoHtml; // 填充到指定位置
</script>
</body></html>실행 결과:
추천 학습: "css 비디오 튜토리얼 "
위 내용은 CSS div 콘텐츠를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS에서 밑줄을 제거하는 방법다음 기사：CSS에서 밑줄을 제거하는 방법