CSS3控制单行文本的溢出

text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。语法：

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：

同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。语法：

normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

时间： 2024-12-24 00:32:30

CSS3控制单行文本的溢出的相关文章

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

<!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> <title></title> <styl

单行文本溢出和多行文本溢出

1.单行文本溢出需要满足三个条件: overflow:hidden;     white-space:nowrap;  text-overflow:ellipsis; 2.多行文本溢出需要满足下面几个条件: display:-webkit-box; overflow:hidden; text-overflow:ellipsis; word-break:break-all; -webkit-box-orient:vertical; //子元素应该被水平或垂直排列 -webkit-line-clam

单行文本溢出显示省略号

用css实现:overflow: hidden;//影藏溢出部分 text-overflow:ellipsis;//显示省略号 white-space: nowrap;//单行文本不换行 原文地址:https://www.cnblogs.com/wangjianping123/p/8900669.html

单行文本溢出显示省略号.多行文本溢出显示省略号

单行文本溢出显示省略号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

单行文本和多行文本溢出显示省略号

1.单行文本 overflow: hidden; white-space: nowrap; //用于处理元素内的空白,只在一行内显示 text-overflow: ellipsis; //超过宽度使用省略号 2.多行文本 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; //对象作为伸缩盒子模型显示          -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元

报表reportviewer控件使用时，单行文本过长的解决办法

最近在做winform的报表,客户需要把纸质模板可以在系统中打印.一开始设计,认为vs自带控件reportviewer可以解决,但在测试过程中发现:若单行文本过长,报表自动分页,弊端是分页后,第一页文本框底部边框和第二页文本框顶端边框无法显示,由于客户是政府机关,要求严格,只好解决这个问题.在解决过程中也是想各种办法,第一种,判断是否分页,分页后,该文本框是否存在本页,若存在,则在相应分页底部和顶端划线,可是搜索属性框,并没有这些属性值,放弃.第二种,主体加边框,与矩阵重合,矩阵边框不要,使用主

单行文本与多行文本省略文本

一.单行文本省略     1.text-overflow:ellipsis;该属性用于当文本溢出的时候用省略号的方式显示.它还有一个属性值是clip(溢出部分直接裁剪掉). 2.overflow:hidden;对溢出内容进行隐藏. 3.white-space:nowrap;强制在一行显示 二.多行文本省略 用-webkit-line-clamp:number;实现,并不是css规范中的属性. 其次,用css规范属性. 可参考http://www.cnblogs.com/accordion/p/6

css3实现超出文本指定行数(指定文本长度)用省略号代替

测试代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta http-equiv="Content-Type" content=&qu

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

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