【技巧】div超出文字隐藏并显示省略号

最新推荐文章于 2024-08-23 11:10:08 发布

邹大叔

最新推荐文章于 2024-08-23 11:10:08 发布

阅读量2.8k

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/zuncle/article/details/56480151

版权

本文介绍了如何使用HTML和CSS实现当div内容超出时，隐藏多余文字并显示省略号的效果。通过设置CSS的`overflow`、`text-overflow`和`white-space`属性，可以优雅地处理长文本在有限空间内的展示。

摘要由CSDN通过智能技术生成

div超出文字隐藏并显示省略号

HTML代码如下：

<div class="logisNews rt">
    <div class="newsTitle">
        <h3>
            <img src="img/icons/news.png" />
            <span>新闻资讯</span>
            <a class="rt" href="#">更多>></a></h3>
    </div>
    <div class="newsInfo">
        <div class="newsCtn">
            <h3 class="lf">
                <a class="news1" href="#">商务部：今年将深入推进跨境电商试点</a></h3>
            <span class="rt">2017-02-21</span></div>
        <div class="newsCtn">
            <h3 class="lf">
                <a href="#">商务部：今年将深入推进跨境电商试点</a></h3>
            <span class="rt">2017-02-20</span></div>
        <div class="newsCtn">
            <h3 class="lf">
                <a href="#">跨境电商共享经济 跨境物流预再崛起</a></h3>
            <span