css实现文本溢出隱藏

saucxs 发布于2019-08-30 14:12 / 1413人阅读

摘要：实现文本溢出显示省略号在做响应式网页的时候，我们要想在不同尺寸的设备下保证布局不会错乱，就需要对文字的长度进行限定。

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

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

基础设置

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

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

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

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



    目录结构清晰是首要目标，至于命名只要能达到表意的目的即可。目录结构清晰


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

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

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



    目录结构清晰是首要目标，至于命名只要能达到表意的目的即可。目录结构清晰


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

运行效果：

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



    目录结构清晰是首要目标，至于命名只要能达到表意的目的即可。目录结构            


/*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;  /*边缘处理*/
}

这种方式比较灵活，但是实现的效果可能会比较生硬，所以需要对边缘进行虚化处理。
运行效果：

意思是这个意思，或许会有更合适的方法进行处理

云服务器 GPU云服务器溢出文本 php文本溢出省略 css文本框 java实现富文本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115852.html

[譯] 學習 CSS clip-path 屬性

摘要：整體來說網頁主要是由矩形所構成的，另一方面印刷品則具備相對多樣性。即便我們設定的元素不再是矩形，但周圍的元素排列方式仍然維持原本矩形的佈局。為了達成周圍的元素跟著裁切的形狀，我們可以使用屬性。周圍的元素仍需要靠來修正。整體來說網頁主要是由矩形所構成的，另一方面印刷品則具備相對多樣性。造成這樣差異的原因有很多，不過其中一個即是缺少合適的工具。這篇文章主要會介紹 clip-path 這...

yuanxin 2019-08-29 11:00 评论0 收藏0
[譯] CSS 載入機制的未來趨勢

摘要：載入流程被限制在兩個階段根據上面的模式，內嵌透過隱藏尚未套用樣式的內容，然後非同步得載入之後呈現內容。樣式表本身的載入機制是平行的，但是套用樣式卻是要照順序的。我們需要一點小技巧來避免。這週閱讀到這篇有意思的文章，於是便動手寫下簡單的翻譯，如果有理解錯誤的地方歡迎指教。 Chrome 正在試圖改變當寫在的行為，從blink-dev 的文章並不能很清楚的知道其優點。所以這篇文章...

Astrian 2019-08-30 12:47 评论0 收藏0
CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）

摘要：前言多行文本超出高度限制出现省略号移动端多为内核的有扩展属性但并不是规范中的属性端往往要借助去实现这一效果，但麻烦且不是很靠谱，今天就用纯来实现一个完全兼容的多行省略。前言多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果，但麻烦且不是很靠谱，今...

李义 2019-08-29 12:21 评论0 收藏0
【前端芝士树】纯CSS实现多行文本溢出显示省略号

摘要：前端芝士树纯实现多行文本溢出显示省略号使用来控制行数由于用来限制在一个块元素显示的文本的行数这是一个不规范的属性，它没有出现在规范草案中，为了实现该效果，它需要组合其他外来的属性。【前端芝士树】纯CSS实现多行文本溢出显示省略号使用-webkit-line-clamp来控制行数由于-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（u...

CNZPH 2019-08-30 15:54 评论0 收藏0
CSS实现单行、多行文本溢出显示省略号

摘要：如果实现单行文本的溢出显示省略号同学们应该都知道用属性来，当然还需要加宽度属来兼容部分浏览。接下来重点说一说多行文本溢出显示省略号，如下。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法： overflow: hidden; text-overflow:ellipsis; whit...

番茄西红柿 2019-04-23 14:39 评论0 收藏0