So implementieren Sie den Inhalt von CSS div über das Verbergen hinaus: 1. Verwenden Sie den CSS-Code „overflow: versteckt;“, um den Inhalt über das Verstecken hinaus zu realisieren. 2. Verwenden Sie den JS-Code „var myBox = document.getElementById('demo')“ ; var mydemoHtml = myBox. innerHTML.slice(0, 20) +'...';" Implementieren Sie einfach den Inhalt, der nicht ausgeblendet ist.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer
Wie verstecke ich den CSS-Div-Inhalt über die versteckte Grenze hinaus?
CSS – Der Überlaufteil des Textes im Div wird mit Auslassungspunkten angezeigt
, sodass der Überlaufteil des Textes im Div mit Auslassungspunkten angezeigt werden kann. Eine Methode ist: Verwenden Sie CSS, um es zu lösen, und die andere Methode Es wird durch js gelöst.
Mehrere Zeilen werden im Div angezeigt und der überschüssige Teil wird mit Auslassungspunkten angezeigt
Code:
<!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>Laufergebnis:
Code:
<!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>Laufergebnisse:
Empfohlenes Lernen: „CSS-Video-Tutorial „
Das obige ist der detaillierte Inhalt vonSo verbergen Sie CSS-Div-Inhalte darüber hinaus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
