【css多行省略和单行省略】的更多相关文章

css多行省略和单行省略

实现文本省略: <!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但他的心灵世界则是一片澄澈明净,他的精神依然昂奋向上.朱自清把他健康高尚的审美情趣,把他对美好事物的无限热爱,将他对人生理想的不懈追求熔铸到文章中去.熔铸到诗一样美丽的语言中去.从而使整篇文章洋溢着浓浓的诗意,产生了经久不衰的艺术魅力<p> /*css代码*/ /*单行*/ .single{ tex…

css多行省略

单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成3行,UI说这个字体改大一点,又得去算一遍,可谓是苦不堪言. 好在有css3,css3提供了实现完美的多行省略方法,本文已scss为例 @mixin ellipsis($lineCount: 2) { text-overflow: -o-ellipsis-lastline; overflow: hi…

CSS学习笔记：溢出文本省略（text-overflow）

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应…

css多行显示省略号

首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowrap:再然后,溢出内容为隐藏,overflow:hidden:第四步:溢出文本显示省略号,即text-overflow:ellipsis:完成这四步即可实现单行文本省略号. 多行文本省略号:代码如下 display: -webkit-box;-webkit-box-orient:vertical;t…

CSS设置行内元素和块级元素的水平居中、垂直居中

CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ PS:当然,如果既要水平居中又要垂直居中,那么综合一下 div{text-align:center; height:30px; line-height:30px} CSS设置块级元素的水平居中 div p{margin:0 auto; widt…

谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS题…

【CSS/JS】如何实现单行／多行文本溢出的省略（...）--老司机绕过坑道的正确姿势

写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或优雅地实现这种需求   单行文本溢出的省略   先上代码 <div style = 'width:400px; height:40px; border:1px solid red;'> <p style='overflow: hidden; text-overflow: ellipsis; whit…

css多行省略-webkit-box-orient打包编译后失效原因

原css代码: .dialog-for-plan .dialog-table .type>p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:; overflow: hidden; } 打包上线后代码: .dialog-for-plan .dialog-table .type>p { display: -webkit-box; -webkit-line-clamp:; overflow: hidd…

css 控制行数 多出的省略

<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .test{ -webkit-line-clamp: 3; /*限制3行*/ -webkit-box-orient: vertical; text-overflow: ellipsis;…

CSS 多行省略失效 (-webkit-box-orient 失效) Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

webpck不能编译这个属性-webkit-box-orient: vertical https://github.com/fanyifanbumaimeng/Articles/issues/48 /* autoprefixer: ignore next */ -webkit-box-orient: vertical;…

[记录] CSS 多行文本超出部分省略

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览 <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示省略号,如下. height: 115p…

Spring Boot 整合 Freemarker，50 多行配置是怎么省略掉的？

Spring Boot2 系列教程接近完工,最近进入修修补补阶段.Freemarker 整合貌似还没和大家聊过,因此今天把这个补充上. 已经完工的 Spring Boot2 教程,大家可以参考这里: 干货|最新版 Spring Boot2.1.5 教程+案例合集 Freemarker 简介 这是一个相当老牌的开源的免费的模版引擎.通过 Freemarker 模版,我们可以将数据渲染成 HTML 网页.电子邮件.配置文件以及源代码等.Freemarker 不是面向最终用户的,而是一个 Java 类…

css 当文字过多时以....省略

<!-- 公告 --> <p class="rst-promotion">公告: {{shopInfo.rst.promotion_info}}</p>     css width: 80vw; font-size: .6rem; color: #; overflow: hidden; text-overflow: ellipsis; margin: .266667vw auto .666667vw; padding: ; white-space:…

css2----单行过长的省略处理

li{ width:300px; white-space:nowrap;表示怎样处理li容器中的空白部分,nowrap表强制不换行,直到文本结束或碰到</br> text-overflow:ellipsis;文本超过li容器宽时,以省略号标识溢出: overflow:hidden; }…

CSS文字不换行，溢出省略

white-space:nowrap; overflow:hidden; text-overflow:ellipsis;…

CSS躬行记（9）——网格布局

网格布局(Grid Layout)也叫栅格布局,与表格布局类似,也依赖行和列.但与之不同的是,网格布局能直接控制HTML文档中元素的顺序.位置和大小等,而不用再借助辅助元素. 一.术语 下图展示了CSS规范中定义的网格. (1)网格容器(grid container)由display属性的两个特殊值(grid和inline-grid)所创建,由于它不是块级容器,因此其布局不受浮动和外边距塌陷的影响. (2)网格项(grid item)也叫网格元素,是网格容器的子元素,注意,它的后代元素不是网格项…

深入了解css的行高Line Height属性

什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. 不过,行间距与半行间距,还是取决于CSS中的line-height.那么,如何来使用line-height呢? 默认状态,浏览器使用1.0-1.2 line-height, 这是一个初始值.你可以定义line-height属性来覆盖初始值:p{line-height:140%} 你可以有5种方式来定…

CSS多行文字截断

有时候容器的宽度是固定的,但要显示的文字有点多,就需要将多余的文字隐藏,而且为了表示还有字没有显示,用省略号表示. 类似这样: 单行文字 单行文字截断比较明显: .truncate { width: 250px; /* or max-width */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行文字 多行文字截断就比较棘手,比如对于下面的代码段: <div class="module"&g…

行内脚本的位置放置----css阻塞行内脚本

行内脚本:避免放置在css和其他资源之间. 若在head中,最好放在css样式表之前,如果放置在样式表之后,会引起css阻塞. css阻塞:由于浏览器要保证css和JavaScript的执行顺序,css之后如果有js,浏览器会先等待css下载执行完毕,再去执行这部分行内的js脚本(这是因为行内脚本可能含有依赖样式表中的样式),而脚本的执行也会阻塞后续资源的加载,从而出现css阻塞.所以,一般要将行内脚本放在css之前.这样css就可以和其他资源并行下载了,不会出现阻塞现象.…

CSS多行文字垂直居中的两种方法

之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中,如果是多行这个肯定不行,而我的同事因为这个用了js来实现居中对齐,我觉得这是很难理解的.故而整理这篇文章. HTML代码: <div class="middle-box"> <div class="middle-inner"> <p>…

css实现行内文字垂直居中

之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行高设置为盒子的高度. p { border:#333333 solid 1px; height:50px; line-height:50px; margin-bottom:30px; } 2:让盒子行内文字垂直居中,解决思路是对盒子的高度设定,然后对盒子的padding-top和padding-bo…

CSS躬行记（1）——CSS基础拾遗

一.box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行.跨列或跨页时的样式渲染,它包含两个值: (1)slice:默认值,盒子会被分割成多部分. (2)clone:断开的各个盒子会单独渲染. 下面用一个示例来演示两种的区别,第一个span元素采用box-decoration-break的默认值,效果如第一张图所示,在断行处没有左右内边距和圆角:第二个span元素box-decoration-break的值为clone,效…

CSS躬行记（5）——渐变

渐变是由两种或多种颜色之间的渐进过渡组成,它是一种特殊的图像类型,分为线性渐变和径向渐变,这两类渐变还会细分为单次和重复两种.渐变图像与传统图像相比,它的优势包括占用更少的字节,避免额外的服务器请求,调试成本更低等.在平时,发挥自己的想象,利用渐变可以创造出许多奇妙的视觉特效. 一.线性渐变 线性渐变会使用linear-gradient()函数,可沿着一条梯度线(gradient line),从某一边或某个角度绘制渐变背景,该背景的默认方向是从元素顶部到底部,如下图所示. div { backg…

CSS躬行记（8）——裁剪和遮罩

一. 裁剪 裁剪(clipping)能让元素显示指定形状的区域,在布局时可起点缀的作用,丰富了视觉呈现.注意,裁剪本质上只是让元素的部分区域透明,由此可知,裁剪完后元素所占的空间仍旧会保留.裁剪最早是在CSS 2.1时代由clip属性引入,但该属性只能应用于绝对定位的元素,并且只能裁剪成矩形.CSS3提供了强大的clip-path属性,突破了clip属性的众多限制,接下来将围绕clip-path属性展开讲解. 1)裁剪形状 clip-path属性可以使用四种裁剪函数:circle().ellip…

CSS基础-行快属性，hover

CSS基础 1.行快属性 在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性.     块标签         div,ul,li,ol,h1~h6,p         可以设置宽高         不可以与别人共处一行         不设置宽度的时候,默认宽度是100%     行内标签         span,strong,a         不可以设置宽高         可以与别人共处一行         其宽高由内容撑开     行内块标签      …

CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertical-align:top;/vertical-align:bottom; 之后效果 案例,html结构代码: <body> <input type="text" ><input type="button" value="百度&qu…

css 多行显示省略号....

CSS属性如下: white-space: nowrap; overflow: hidden; text-overflow: ellipsis;…

css 多行超长点点点

超长?不是很好吗?什么?不好?有什么坏处吗?会使人想哭的! 这里来说下,超长点点点的处理: 一行超长点点点,这个很多都会吧! text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 那多行呢?不会了吧,上代码: overflow: hidden; display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 . text-overflow: ellipsis; // 可以用来多行文本的情况下,用省略号“.…

CSS多行文字超出隐藏加省略号

overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;…

让CSS某行不失效

比如百度的分享代码 <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">已经定义好了CSS,我想用自己的CSS,但是去掉bdshare_t bds_tools get-codes-bdshare,分享代码就失效了,我想让bdshare_t bds_tools get-codes-bdshare不执行CSS的部分 解决办法: 这个是css样式的优先级问题,可以在自己的css样式里面…