码迷,mamicode.com
首页 > Web开发 > 详细

css实现文本溢出隱藏

时间:2020-06-04 21:38:13      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:lips   跨浏览器兼容   overflow   样式   不同   ado   data-   元素   处理   

css实现文本溢出显示省略号

在做响应式网页的时候,我们要想在不同尺寸的设备下保证布局不会错乱,就需要对文字的长度进行限定。

基础设置

在介绍下面的方法之前,我们先对所有的例子进行基础的样式设置

/*基础设置*/
div.box{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    color: #333;
    line-height: 1.8;
    margin:30px auto;
}

设置好啦,现在我们开始表演=.=

1.单行溢出隐藏显示...

<!--单行溢出隐藏显示...-->
<div class="box text-box1">
    <p>目录结构清晰是首要目标,至于命名只要能达到表意的目的即可。目录结构清晰</p>
</div>

/*1.单行溢出隐藏显示...(在文字的容器上设置)*/
.text-box1 p{
    white-space: nowrap;      /*超出的空白区域不换行*/
    overflow: hidden;         /*超出隐藏*/
    text-overflow: ellipsis;  /*文本超出显示省略号*/
}

我一定要把每一步都记得清清楚楚,因为我发现不写清楚为什么这样设置,过段时间真的会忘了。
运行效果:
技术图片

2.多行溢出隐藏显示...

<!--多行溢出隐藏显示...(只兼容webkit内核的浏览器)-->
<div class="box text-box2">
    <p>目录结构清晰是首要目标,至于命名只要能达到表意的目的即可。目录结构清晰</p>
</div>

/*2.多行溢出隐藏显示...(在文字的容器上设置)  只兼容webkit内核的浏览器*/
.text-box2 p{
    display: -webkit-box;             /*将对象转为弹性盒模型展示*/
    -webkit-box-orient: vertical;     /*设置弹性盒模型子元素的排列方式*/
    -webkit-line-clamp: 2;            /*限制文本行数*/
    overflow: hidden;                 /*超出隐藏*/
}

运行效果:
技术图片

3.多行溢出隐藏显示...

<!--多行溢出隐藏显示...(跨浏览器兼容+伪元素定位)-->
<div class="box text-box3">
    <p>目录结构清晰是首要目标,至于命名只要能达到表意的目的即可。目录结构</p>            
</div>

/*3.多行溢出隐藏显示...(跨浏览器兼容+伪元素定位)*/
.text-box3 p{
    position: relative;
    line-height: 1.4em;        /*行高和height成倍数,这里以三行文本超出隐藏举例*/
    height: 4.2em;
    overflow: hidden;
}
.text-box3 p::after{         /*若要兼容IE8需用:after*/
    content: "...";          /*替换内容比较灵活*/
    position: absolute;
    bottom: 2px;
    right:5px;
    padding: 0 3px;
    background:#fff;         /*颜色和文字背景保持一致*/
    box-shadow: 0 0 10px #fff;  /*边缘处理*/
}

这种方式比较灵活,但是实现的效果可能会比较生硬,所以需要对边缘进行虚化处理。
运行效果:
技术图片
意思是这个意思,或许会有更合适的方法进行处理

css实现文本溢出隱藏

标签:lips   跨浏览器兼容   overflow   样式   不同   ado   data-   元素   处理   

原文地址:https://www.cnblogs.com/webshare2020/p/13046457.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!