活用CSS巧妙解决超长文本内容显示问题
来源:互联网 发布:宏观经济gdp数据分析 编辑:程序博客网 时间:2024/06/05 05:28
现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行显示,并且截取一定的长度,截取的地方用省略号代替。虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,活用CSS可以巧妙地解决这个问题,请看下面的代码:
代码一:用于非表格LI或span等都可以
.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...);需与overflow:hidden;一起使用。*/
}
代码二:用于表格
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...);需与overflow:hidden;一起使用。*/
}
- 活用CSS巧妙解决超长文本内容显示问题
- css处理文本内容过多.....显示问题
- CSS 超长文本的隐藏和鼠标覆盖后显示
- css实现内容超长自动截取并显示省略号
- 巧妙解决navigationBarTitle不显示问题
- 实现超长文本分页显示
- 实现超长文本分页显示
- 使用javascript解决字符串超长显示的问题
- 自定义TextView解决超长文字显示的问题
- 解决AndroidStudio的logcat显示超长字符串的问题
- CSS解决内容换行问题
- 解决超长字符串分页问题
- eclipse内容辅助显示超长无用信息(JavaElementLabels……)问题的解决方案
- css 同行文字超长显示省略标记
- 活用CSS
- CSS控制文本内容固定行行显示,超出部分“...”
- 文本超长显示省略号,鼠标移上显示全部
- 解决高亮度显示内容问题(onFocus)
- Android架构分析之Android驱动程序开发
- NGUI图集
- linux+fortran+openmp使用中遇到的一些问题
- Nginx+FastCGI运行原理
- js 冒泡排序--学习笔记
- 活用CSS巧妙解决超长文本内容显示问题
- Tomcat5.0与Tomcat6.0目录结构详解
- 黑马程序员_day01_Hello World
- POJ 3007 Organize Your Train part II
- 通过DBMS_RANDOM得到随机
- How to resolve "valid signing identity not found" in provisioning profiles library
- Spring怎样把Bean实例暴露出来?
- ThinkPHP控制器模块分组
- 个人作品 --Android豆瓣客户端