单行文本和多行文本框实现溢出省略的效果

绝地灬酷狼 2023-06-26 08:22 10阅读 0赞

**一、需求问题**

在开发中，我们可能也会遇到这样的需求。当在单行或者多行的时候，文本的内容溢出了，需要隐藏，可以用省略号去表示。下面是我的实现方式。

**二、需求分析**

对于单行文本框溢出省略，我们可以使用`overflow`、`white-space`和`text-overflow`来进行单行文本省略截断，实现文本溢出省略的效果。对于多行文本框溢出省略，我们可以使用`line-height`、`overflow`、`float`、`position`和`word-break`来进行实现多行文本省略截断。

**三、需求解决**

**1. 单行文本省略**

<style> .demo {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; } </style>
    <body>
    	<div class="demo">这是一段文本</div>
    </body

**2. 多行文本省略**

<style> .demo { background: #099; max-height: 40px;  line-height: 20px;  overflow: hidden; } .demo::before{  float: left; content:''; width: 20px; height: 40px; } .demo .text { float: right; width: 100%; margin-left: -20px;  word-break: break-all; } .demo::after{ float:right; content:'...'; width: 20px; height: 20px;  position: relative; left:100%; transform: translate(-100%,-100%); } </style>
    <body>
    	<div class='demo'>
        	<div class="text">这是一段文本</div>
        </div>
    </body

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关单行文本溢出隐藏

text-content \{ background:yellow; /\* 指定宽度超出这个宽度就显示省略号 begin */ width:100px; ...

小灰灰/ 2024年04月18日 21:27/ 0 赞/ 103 阅读

相关字节一面：如何实现单行／多行文本溢出的省略样式？

最近博主在**字节面试**中遇到这样一个面试题，这个问题也是前端面试的高频问题，作为一名前端开发工程师，css是我们的必备技能，文本溢出问题也是我们经常遇到的问题，我们不...

落日映苍穹つ/ 2024年04月17日 10:27/ 0 赞/ 70 阅读

相关单行文本和多行文本框实现溢出省略的效果

一、需求问题在开发中，我们可能也会遇到这样的需求。当在单行或者多行的时候，文本的内容溢出了，需要隐藏，可以用省略号去表示。下面是我的实现方式。二、需求分析对于单行文

绝地灬酷狼/ 2023年06月26日 08:22/ 0 赞/ 11 阅读

相关 css单行文字和多行文字溢出隐藏

单行文字溢出隐藏步骤 1. 强制文字一行显示 white-space: nowrap; 1. 将多余的文字隐藏 overflow: hidden

电玩女神/ 2023年02月21日 06:47/ 0 赞/ 55 阅读

相关面试官：如何实现单行／多行文本溢出的省略样式？

![e8a1aa51e6f7bceb0055f7c9d4a5c99f.png][] 一、前言在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不

心已赠人/ 2023年01月14日 11:55/ 0 赞/ 145 阅读

相关前端开发Tip-CSS 实现文本单行或者多行省略

单行省略显示 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 中

╰+攻爆jí腚メ/ 2022年10月16日 12:22/ 0 赞/ 169 阅读

相关 CSS 实现文本的单行和多行溢出省略效果

![6044920c21cf4ec5c06d8ec987393a55.png][] 单行文本 .text { overflow: hidden;

迷南。/ 2022年09月07日 14:43/ 0 赞/ 213 阅读

相关 CSS 文本溢出省略显示

实现文本显示单行或多行，超出部分用省略号显示是一个很常见的需求，在这里做个分享记录。(文末有 demo 演示~) 单行溢出缩略下面是单行缩略的实现： ove

男娘i/ 2022年04月14日 20:29/ 0 赞/ 406 阅读

相关小程序文本溢出显示省略号（单行/多行）

1.单行：外部容器应加overflow: hidden;否则不显示省略号 .text { font-size: 38rpx;

拼搏现实的明天。/ 2022年03月29日 03:57/ 0 赞/ 414 阅读

相关文本缩进、换行、单行文本溢出显示省略号、多行文本的最后一行溢出显示省略号

1. text-indent: 40rpx; 文本缩进 .title { width: 550rpx; text-indent:

客官°小女子只卖身不卖艺/ 2021年07月24日 22:35/ 0 赞/ 483 阅读