溢出

2022/4/1 23:19:40

编程Tag： 溢出 text Font height overflow bottom

本文主要是介绍溢出，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>溢出-陈敏芳</title>
<style type="text/css">
.box{
width: 310px;
margin: 10px;
font-family: 楷体;
}
h2{
background: #fc0;
height: 35px;
line-height: 35px;
padding: 0 0 0 5px;
font-size: 20px;
}
li{
list-style: none;
border-bottom: 1px #999 dashed;
margin-bottom: 20px;
}
a{
display: block;
width: 300px;
padding-left: 5px;
}
.yichu a {
text-overflow: ellipsis;/*文本溢出时显示省略标记...clip*/
overflow: hidden;/*为text-overflow做准备，将溢出内容设置为隐藏*/
white-space: nowrap;/*为text-overflow做准备，强制文字在一行内显示*/
text-decoration: none;/*取消超级链接默认时的下划线效果*/
}
</style>
</head>
<body>
<div class="box">
<h2>这里未使用溢出处理</h2>
<ul>
<li><a href="#">为什么年轻人挣得很多还是很穷房价是主因</a></li>
<li><a href="#">真正的勇士敢于吃最生鲜的河豚</a></li>
</ul>
</div>
<div class="box">
<h2>这里使用溢出处理</h2>
<ul class="yichu">
<li><a href="#">为什么年轻人挣得很多还是很穷房价是主因</a></li>
<li><a href="#">真正的勇士敢于吃最生鲜的河豚</a></li>
</ul>
</div>
</body>
</html>

输出效果：

这篇关于溢出的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

溢出

相关编程文章