css限制字数

解决内容溢出问题(比如说文章列表很长,而其宽度又受到限制,此时超出宽度的内容就会以(...)显示):text-overflow

1、clip:表示不显示省略标记(...),而只是简单的裁切,需要在一定的高度范围内配合overflow:hidden属性使用,如果不配合的话将无任何效果;

2、ellipsis:对象文本溢出时将显示省略标记(...),需要配合overflow:hidden;white-space:nowrap一起使用才会有效果。

text-overflow:clip所有浏览器都支持,但是text-overflow:ellipsis只有Firefox不支持,但有一些方法可以 兼容解决这个问题,这个问题后面在来一起讨论,我们先从简单的开始。text-overflow:ellipsis应用在Opera浏览器下时,需要加上 其前缀“-o-”。

.text-overflow-clip {
   text-overflow: clip;
   overflow: hidden;
   height: 50px;
 }text-overflow:clip这个属性在我们实际应用中根本是没有任何意义的,因为他离开了height和overflow无任何效果,当他有这 两个属性配合时,达到的效果跟我们设置overflow:hidden效果一样,无任何区别,因此我们在实际应用中完全可以使用 overflow:hidden来实现这样的效果。换句简单的话说:单独的text-overflow:clip起不到任何截切效果。

text-overflow:clip这个属性在我们实际应用中根本是没有任何意义的,因为他离开了height和overflow无任何效果,当他有这 两个属性配合时,达到的效果跟我们设置overflow:hidden效果一样,无任何区别,因此我们在实际应用中完全可以使用 overflow:hidden来实现这样的效果。换句简单的话说:单独的text-overflow:clip起不到任何截切效果。

text-overflow:ellipsis在配合overflow:hidden;white-space:nowrap属性可以用来代替标题截取函 数,这样一来有助于搜索引擎,打个比方说,我们标题有20个字符,而其宽度只能设置100px,如果采用标题的截取函数,那么这个标题就显示不够完整,要 是我们使用text-overflow:ellipsis,标题输出是完整的,只不过是受到了其元素容器大小限制无法全部显示出来,此时就用(...)代 替了被隐藏的部分。换句说,text-overflow:ellipsis属性只起到一个注解作用;

.text-overflow-ellipsis {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;   //让文本不换行,让文本内容强制性在同一行
  }
时间: 2024-10-26 16:13:33

css限制字数的相关文章

怎么实现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和jquery控制文章标题字数?

如何使用css控制文章标题字数? 最佳答案 控制文章标题字数,不是动态网页的专利,如果静态页面使用CSS样式,也可以实现相同的效果! 看这个例子,你们可以复制到记事本保存为HTML文件看效果! <html> <title>css控制字数</title> <head> <style type="text/css"> .dd { border: solid 1px gray; width:180px; overflow: hidd

CSS 超出隐藏实现限制字数的功能代码(多浏览器支持)

<html> <title>css控制字数</title> <head> <style type="text/css"> .dd { border: solid 1px gray; width: 180px; course: hand; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* for IE */ -o-text-overflow: e

html实现钝角效果;html实现限制一行字数的显示,超出的部分用省略号(....)来代替

前端实现div框边角的钝化虽然简单,但是有时候突然想不到,特此写下几句实现方法,以便记忆. 实现div框四个角都钝角的操作:设置 div : border-radius=10px; 实现div框一个角的钝角效果 :设置div :border-top-left-radius=10px; border-top-right-radius=10px; border-bottom-left-radius=10px; border-bottom-right-radius=10px; html实现限制一行字数

CSS控制文字只显示一行,超出部分显示省略号

<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! </p> 1.text-overflow: ellipsis;  这里的重点样式是  text-overflow: ellipsis; 不过话说te

css中a标签内容超出最大字数隐藏处理

问题:a标签内容超出最大字数显示问题 1.超出是最后显示为“...” 2.鼠标放在上面显示完整内容 3.点击新窗口打开链接内容 解决方法: css部分: .list{font:Georgia, "Times New Roman", Times, serif;font-size:14px;width:200px;display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellips

CSS实现限制显示的字数,超出显示&quot;...&quot;

一.背景 在实际项目中,我们常常需要对某些页面的某些特定区域显示指定数量的内容,超出的内容显示"..."来进行美化页面,那么应该怎么做呢?今天就让我们来看看如何达到这一效果. 二.实现步骤 CSS代码 .ov{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 这样我们就实现了这一效果,但是限制条件是:所要显示的内容只能在一行,不能有换行出现,否则不起作用. 测试代码 1 <!DOCTYPE html&g

ZH奶酪:CSS中限制span显示字数

span中的文字是取出于数据库的,不确定文字的个数,由于排版的原因只想让span不超过6个字,如果超过只显示六个,当鼠标悬浮上去的时候tip显示全部内容 Step1.在span中添加title <span title="文字文字文字文字文字文字文字">文字文字文字文字文字文字文字</span> Step2.设置span宽度 span{ display: block; width: 120px; overflow: hidden; white-space: now

用css解决table文字溢出控制td显示字数

场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: [plain] view plain copy table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{ width:100%; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */