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

最新推荐文章于 2021-08-23 08:40:00 发布

城南花开ze

最新推荐文章于 2021-08-23 08:40:00 发布

阅读量813

点赞数 1

分类专栏： HTML5+CSS3 文章标签： css3 单行文本框多行文本框实现溢出省略的效果

本文链接：https://blog.csdn.net/weixin_42614080/article/details/103775440

版权

HTML5+CSS3 专栏收录该内容

6 篇文章 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

城南花开ze

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
单行文本和多行文本框实现溢出省略的效果

一、需求问题在开发中，我们可能也会遇到这样的需求。当在单行或者多行的时候，文本的内容溢出了，需要隐藏，可以用省略号去表示。下面是我的实现方式。二、需求分析对于单行文本框溢出省略，我们可以使用overflow、white-space和text-overflow来进行单行文本省略截断，实现文本溢出省略的效果。对于多行文本框溢出省略，我们可以使用line-height、overflow、float...
复制链接

扫一扫