使用text-overflow:ellipsis实现文字不全显示，使用...代替

话不多说，先上成果

开始的样子，这样方框的大小不同，很不美观。

源代码

<!--循环获取新闻-->
            <div class="row">
                <div th:each="temp:${news}" class="card col-md-3" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${temp.title}">Card title</h5>
                        <p class="card-text" th:text="‘作者：‘+${temp.userUsername}+‘  |    类型：‘+${temp.category}">#</p>
                        <a href="#" th:href="@{/newsdetail/}+${temp.id}" class="btn btn-primary">点击查看详细</a>
                    </div>
                </div>
            </div>

第一步：不换行
在标题的div标签加ccs样式，不允许换行：white-space:nowrap;

让内容不换行，效果如图，现在的效果就比较差了

第二步：隐藏超出
为了让内容不撑开容器，显示到外面。我们为div标签再添加css样式：overflow: hidden;

隐藏超出的内容，效果如下。其实已经能看了，但是少点逼格

第三步：添加省略号
为了让用户知道，这里的内容隐藏了部分，我们为div标签再添加css样式：text-overflow: ellipsis;

来让其在后面添加上省略号，效果如下。就和我们的目标一致了

使用text-overflow:ellipsis实现文字不全显示，使用...代替

原文：https://www.cnblogs.com/zllk/p/13063193.html