实现文字自动截断省略号使用CSS

最新推荐文章于 2024-06-09 17:43:42 发布

一把编程的菜刀

最新推荐文章于 2024-06-09 17:43:42 发布

阅读量954

点赞数

文章标签： css border html

本文链接：https://blog.csdn.net/chinmo/article/details/2110946

版权

.test {
width : 200px ;
height : 50px ;
border : 1px solid red ;
padding : 10px ;
overflow : hidden ; /* 不显示超过对象宽度的内容 */
text-overflow : ellipsis ; /* 当对象内文本溢出时显示省略标记（...） */
white-space : nowrap ; /* 限制在一行内显示所有文本 */
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.aspxuexi.com asp学习网</title>
</head>
<style type="text/css">
div.test {
width : 200px ;
height : 100px ;
border : 1px solid red ;
padding : 10px ;
overflow : hidden ;
text-overflow : ellipsis ;
white-space : nowrap ;
}

</style>

<body>
<div class="test">
选来选去最终还是决定去大平坡<a href='http://www.ffasp.com' style='text-decoration:none'>。</a>场地宽，可以游

</div>
</body>
</html>

一把编程的菜刀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
实现文字自动截断省略号使用CSS

.test{ width:200px; height:50px; border:1px solid red; padding:10px; overflow:hidden; /*不显示超过对象宽度的内容*/ text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记（...）*/ white-space:nowrap; /*限制在一行内显示所有文本*/ } www.
复制链接

扫一扫