zoukankan      html  css  js  c++  java
  • 使用text-overflow:ellipsis实现文字不全显示,使用...代替

    话不多说,先上成果

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

    源代码

    <!--循环获取新闻-->
                <div class="row">
                    <div th:each="temp:${news}" class="card col-md-3" style=" 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;

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

  • 相关阅读:
    C语言学习笔记:14_内部函数和外部函数
    HDU 1247 Hat’s Words (字典树 &amp;&amp; map)
    混合云技术难题
    psql
    postgresql基本语句
    postgresql C/C++ API 接口
    REST API初识及设计
    postGreSQL数据库部署及简单使用
    IO-APIC
    OpenstackHigh-level-service
  • 原文地址:https://www.cnblogs.com/zllk/p/13063193.html
Copyright © 2011-2022 走看看