Flex布局下如何使用text-overflow:ellipsis省略过长文本

最新推荐文章于 2024-05-10 10:16:57 发布

码飞飞

最新推荐文章于 2024-05-10 10:16:57 发布

阅读量4k

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_43820866/article/details/104114811

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

问题

试想一下我们如何通过Flex布局实现下面这个组件呢？
在这里插入图片描述
中间显示的文字内容过长是可以自动省略

Flex布局实现方法一(推荐)

HTML：

<div class="container">
    <div class="field">
        <div class="title">文本输入</div>
        <div class="value">水电费水电费水电费是的水电费水电费水电费是的</div>
        <div class="btn">按钮</div>
    </div>
</div>

CSS：

.container {
    width: 375px;
}
.field {
    width: 100%;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    align-items: center;
}
.title {
    width: 90px;
}
.value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn {
    height: 30px;
    line-height: 30px;
    padding: 0 13px;
    font-size: 13px;
    background-color: green;
    color: #fff;
    flex-shrink: 0;
    margin-left: 8px;
    border-radius: 5px;
}

Flex布局实现方法二

HTML：

<div class="container">
    <div class="field">
        <div class="title">文本输入</div>
        <div class="content">
            <div class="value">水电费水电费水电费是的水电费水电费水电费是的</div>
        </div>
        <div class="btn">按钮</div>
    </div>
</div>

CSS：

.container {
    width: 375px;
}
.field {
    width: 100%;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    align-items: center;
}
.title {
    width: 90px;
}
.content {
    flex: 1;
    overflow: hidden; /* 或使用 min-width: 0;都可以 */
}
.value {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn {
    height: 30px;
    line-height: 30px;
    padding: 0 13px;
    font-size: 13px;
    background-color: green;
    color: #fff;
    flex-shrink: 0;
    margin-left: 8px;
    border-radius: 5px;
}