css控制显示超出多少行以后开始出现省略号的写法

display: -webkit-box; display: -moz-box; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; /*控制文本行数,多少行以后开始省略号 */ line-clamp: 2; -webkit-box-orient: vertical;…

CSS控制显示超出部分，用省略号显示

经常使用.可是常忘,我又不是写css的.所以记下来: 先设置一下限制的宽度, display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;…

CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;…

CSS控制文本超出指定宽度显示省略号和文本不换行

一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与overfl…

CSS控制显示图片的一部分

使用情形:防止反复请求图片资源,我们经常采用一张图片多种效果或内容显示. 假设我有纸张竖直方向的一张图片,竖直y轴方向分别是字母:A,B,C.... 现在分别要显示A.B.C 等字母,我们的CSS可以这么写: 这里图片一个字母所占的width=20px,height=20px; .mar_wordA { background: url("../images/ranking.gif") no-repeat scroll 0 0px transparent; } .mar_word…

css 控制文字超出部分显示省略号

该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示…

【css】文本超出2行显示省略号

首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行这三个是css的基础属性,需要记得. 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为弹性伸缩盒子模型显示. -webkit-box-orient:vertical; //从…

css 控制文字超出时显示省略号

不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内容超出显示省略号</title> <style> .limitWord{ width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:keep-all…

CSS控制文字超出部分显示省略号

实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"></p> 实现多行文本溢出显示省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; overflow: hidden;…

CSS控制文本超出后隐藏并用省略号代替

一.仅定义text-overflow:ellipsis; 不能实现省略号效果. 二.定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果. 三.按mb5u.com的教程,即本文所讲的方法,同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果:…

css单行文本与多行溢出文本的省略号问题

在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这…

CSS控制图片显示区域

优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现方式有多种,一种是把识别出来的人脸截取成多张小图片,一种是把人脸的位置找出来,通过css样式来控制显示,可以用background-image.background-repeat.background-position三个属性实现,简单demo: <div style="width:37px;…

css控制文字长度，超出长度显示...

css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }…

CSS控制文字显示一行，超出显示省略号

这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显示省略号”,我自己做的时候,因为场景的div宽度是固定的,我就直接截取了文本的前 X 个字符显示,类似于这样: str = str.slice(0,10) +"……"'; 其实这样做有很大的弊端,网站每次数据刷新的时候,都要这样做一次,最后发现可以用css实现,如下所示: <!DOC…

css控制字符长度超出变成点点点显示（单行，多行）

css控制字符长度超出变成点点点显示单行: width 必不可少 div{ width: 55%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 多行(需要浏览器支持该属性): p{ color: #999999; font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box…

【css】文本超出行数以省略号显示

//超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; //行数设置…

Android之GridView控制显示多少行以及遇到的怪事

前段时间接到一个需求,要求GridView超过两行只显示两行多余的不显示.但是GridView没有设置多少行的api,只有设置多少列的方法,到处查找资料都类似的case,stakeoverfrow上面也没什么有价值的答案,不过在百度知道竟然看到了一个思路. 知道:http://zhidao.baidu.com/link?url=f-F4MnuKApNqgTzcW0r7nUDljHch3v-iGV7LspkMFW97ftxgh0JJSwhdRYkipzK4zdyBoWfJZ9ZakJoAnBppK…

CSS控制长文本内容显示(截取的地方用省略号代替)

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行显示,并且截取一定的长度,截取的地方用省略号代替.虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,活用CSS可以巧妙地解决这个问题,请看下面的代码:代码一:用于非表格LI或span等都可以 www.169it.com .text-overflow { display:block;/*内…

怎么实现CSS限制字数,超出部份显示点点点.

如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div> 效果: 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...…

CSS控制XML与通过js解析xml然后通过html显示xml中的数据

使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} price{ display:block;colo book.xml <?xml version="1.0" encoding="GB2312" ?> <?xml-stylesheet type="text/css" href=&qu…

CSS控制LI行字符溢出用省略号取代

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI",Tahoma,Helvetica,Sans-Serif,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5;}…

CSS控制图片和文字在同一行显示且对齐的3种方法

CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法有3种:1.通过添加css的“vertical-align:middle;”:2.如果图片是背景图片,可以在css中设置背景图片:3.把文字和图片分别放入不同的div中.上面三种方法都可以让图片和文字在同一行显示,下面我们用实例来应用一下. 1.添加上“vertical-align:middle”属…

用CSS控制图片大小显示的方法

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示. 对于标准浏览器(如Chrome/Firefox),或者IE7/8浏览器,直接使用max-width,max-height:或者min-width,min-height的CSS属性即可.如: 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高…

css控制打印时只显示指定区域

CreateTime--2017年9月26日08:16:04 Author:Marydon css控制打印时只显示指定区域思路: 1.使用打印命令@media print: 2.控制执行打印命令时,非打印区域隐藏. CSS代码 <style type="text/css"> /* 执行打印命令时,非打印区域隐藏(不会被打印出来) */ @media print{ #noPrintDiv { display:none; } } </style> HTML代码…

css控制超出部分自动省略...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css控制超出部分自动省略...</title> <style> .nav { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </…

html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : clip | elli…

CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"> here are some test words </div> <div id="button">点击显示</div> 假设使用position:absolute和top-9999px控制点隐藏 .holi{ width: 200px; heigh…

css超出多行隐藏

单行隐藏: overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap;/*规定段落中的文本不进行换行 */ 多行隐藏: overflow: hidden; display: -webkit-box;//将元素设为盒子伸缩模型显示 -webkit-box-orient: vertical;//伸缩方向设为垂直方向 -webkit-line-clamp: ;//超出3行隐藏,并显示…

css控制文本内容显示省略号

1,单行文字显示省略号 div{ width:200px; overflow:hideen; white-space:nowrap; text-overflow:ellipsis; } 2,多行文字显示省略号 div{ width:200px; overflow:hideen; text-overflow:ellipsis; display:-webkit-box;//将对象作为弹性伸缩盒子模型显示 -webkit-line-clamp:2;//控制显示几行文字 -webkit-box-orie…

【css控制显示超出多少行以后开始出现省略号的写法】的更多相关文章