元素跟随文本浮动显示

倔强狸花猫

于 2024-01-04 18:05:53 发布

阅读量398

点赞数 9

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_53657941/article/details/135391914

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章讲述了在项目中如何使用CSS实现单行和多行文本的省略号显示，并附带小图标或详细按钮。作者详细介绍了HTML结构和相应的CSS样式规则，展示了两种不同的显示效果。

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

1、项目需求：单行文本显示省略号，跟随显示小图标

<div class="text-box">
   <div class="script">
      回望党的百年奋斗史，调查研究是我们党的传家宝。从启航红船到领航巨 回望党的百年奋斗史，
   </div>
   <img style="width: 18px;height: 18px;margin-left: 4px;" src="" mode="" />
</div>

css样式：

.text-box{
    margin-top: 50px;
    /* 宽度由内容撑大 */
    width: min-content;
    /* 设置最大可用空间 */ 
    max-width: 400px;
    display: flex;
    align-items: center;
    .script{
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 16px;
    }
}

显示效果：

2、项目需求：多行文本显示省略号，跟随显示[详细]

<div class="Pinned-info">
    <div class="Pinned-detail">
        <span class="icon">[详细]</span>
        <span>
            回望党的百年奋斗史，调查研究是我们党的传家宝。从启航红船到领航巨 回望党的百年奋斗史，
        </span>
        <span class="icon-two">[详细]</span>
    </div>
</div>

css样式：

.Pinned-info{
    max-width: 500px;
    display: flex;
    position: relative;
    overflow: hidden;
    border: 1px solid green;
    margin-top: 30px;
    .Pinned-detail{
        text-indent: 2em;
        font-size: 14px;
        line-height: 20px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .icon{
        font-size: 14px;
        line-height: 20px;
        color: $primaryColor;
        float: right;
        clear: both;
        display: block;
        width: 40px;
        height: 20px;
        text-indent: 0;
    }
    .icon-two{
        font-size: 14px;
        line-height: 20px;
        color: $primaryColor;
        position: relative;
        display: inline-block;
        margin-left: 2px;
        text-indent: 0;
    }
    .icon-two::after{
        content: '';
        position: absolute;
        background: #ffffff;
        left: 0px;
        bottom: -100%;
        height: 100%;
        width: 100%;
    }
    .Pinned-detail::before{
        content: '';
        display: block;
        float: right;
        width: 0px;
        height: calc(100% - 20px);
    }

    .Pinned-detail::after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 100%;
        height: 100%;
        background: #ffffff;
    }

}

显示效果：