文字折叠
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本折叠</title>
<style type="text/css">
div.text1,div.text2{
width: 200px;
padding: 10px;
border: 2px solid red;
white-space: nowrap;/*不折行*/
overflow: hidden;/*超出部分隐藏*/
text-overflow: ellipsis;/*用省略号显示*/
}
</style>
</head>
<body>
<div class="text1"><!--中文默认折叠，英文默认不折叠-->
所有邂逅相逢，所有萍聚水遇，都在缘分的天空下慢慢演绎。
一款柔情含蓄的衣饰或是一袭与众不同的衣衫，都会成为你不同凡响必要法宝。
在火热激情的青春里，在热烈奔放的夏之海洋里，你会选择什么样的精彩？
</div>
<div class="text2">
Spring is a lovely season.
The weather gets warm, and the sun shines brightly.
Flowers bloom in many colors, and trees turn green.
Birds sing happily in the sky. People go out to walk and enjoy the nice air.
Spring brings hope and joy to everyone.
</div>
</body>
</html>
如何动态改变css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>如何动态改变css样式</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.bg{
margin: 0 auto;
width: 500px;
height: 300px;
line-height: 300px;
background-color: red;
text-align: center;
}
.blue{
margin: 0 auto;
width: 500px;
height: 300px;
line-height: 300px;
background-color: blue;
text-align: center;
}
button{
/*display: inline-block;*/
width: 100px;
}
</style>
</head>
<body>
<div class="bg">
<button onclick="hello()">改变背景颜色</button>
<!--<a href="javascript:alert('hello')">改变背景颜色</a>-->
</div>
</body>
<script type="text/javascript">
function hello(){
//找到需要改变背景颜色的容器
let divs=document.getElementsByClassName('bg')
if(divs[0].className=='blue'){
divs[0].className='bg'
}else{
divs[0].className='blue'
}
}
</script>
</html>
浙公网安备 33010602011771号