css 定位以及文字超长省略
定位：
<html>
<head> <title></title> <style type="text/css"> html,body { overflow:hidden; margin:0px; width:100%; height:100%; } .virtual_body { width:100%; height:100%; overflow-y:scroll; overflow-x:auto; } .fixed_div { position:absolute; z-index:2008; bottom:20px; left:40px; width:800px; height:40px; border:1px solid red; background:#e5e5e5; } </style>
</head> <body>
<div class="fixed_div">I am still here!</div>
<div class="virtual_body"> <div style="height:1800px;"> I am s_p! </div>
</div>
</body>
</html>
文字隐藏：
<!DOCTYPE> <html> <head></head> <body><table width="550" border="0" cellpadding="5" cellspacing="1" style="table-layout:fixed;"> <tr> <th nowrap bgcolor="#C6D9E7" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">站长特效一号测试1</th> <th nowrap bgcolor="#C6D9E7" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">站长特效二号测试2</th> <th nowrap bgcolor="#C6D9E7" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">站长特效三号测试3</th> </tr> <tr> <td nowrap style="overflow:hidden; text-overflow:ellipsis;">站长特效一号测试1111111！</td> <td nowrap style="overflow:hidden; text-overflow:ellipsis;border-right:1px solid #C6D9E7;">站长特效一号测试22222222</td> <td nowrap style="overflow:hidden; text-overflow:ellipsis;">站长特效一号测试44444444</td> </tr> </table> </body> </html>
强制不换行
white-space:nowrap;
自动换行
word-wrap: break-word;
word-break: normal;
强制英文单词断行
word-break:break-all;
电子狗table td：换行例子
word-break: break-all;
word-wrap: break-word;
/*一行文字溢出省略号*/
.ellipsis-1{overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}
/*两行文字溢出省略号*/
.ellipsis-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden;text-overflow:ellipsis;}
/*三行文字溢出省略号*/
.ellipsis-3{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow:hidden;text-overflow:ellipsis;} 简单点的方式就是 copy text-overflow
语法：
text-overflow ： clip | ellipsis
取值：
- clip：
- 不显示省略标记（...），而是简单的裁切。
- ellipsis：
- 当对象内文本溢出时显示省略标记（...）
说明：
- 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
- text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-overflow</title>
</head>
<body>
<style type="text/css">.test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}.test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}
</style>
<h2>text-overflow : clip </h2><div class="test_demo_clip">不显示省略标记，而是简单的裁切条
</div>
<h2>text-overflow : ellipsis </h2>
<div class="test_demo_ellipsis">当对象内文本溢出时显示省略标记
</div>
</body>
</html>http://www.spritecow.com
转载于:https://www.cnblogs.com/y112102/archive/2012/12/21/2828312.html
css 定位以及文字超长省略相关推荐
- 老牛不知所以然-html中超长文字单行省略对弹性盒子约束的破坏现象
如果你不是从一个Android转过来写前端的,你不知道安卓程序员对html中弹性布局有多么钟爱.我使用它,最多的场景,是他可以当成安卓布局中LinearLayout + weight的方式,按照比例, ...
- 【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
目标 了解掌握CSS值和单位 了解掌握CSS文字排版 了解掌握CSS变换,过渡,动画 了解掌握CSS定位 CSS的值和单位 https://developer.mozilla.org/zh-CN/do ...
- css文字超长显示...
overflow: hidden; // 文字超长隐藏text-overflow:ellipsis; // 显示...white-space: nowrap; // 单行显示
- html怎么移动文字的位置,css怎么移动文字
css实现移动文字的方法:1.在块元素容器中,可以用"text-align:center.left.right"来移动文字的位置:2.使用float和padding属性:3.通过p ...
- CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
- 1、CSS 定位 (Positioning)
position 属性指定了元素的定位类型. CSS 定位属性 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含 ...
- css 固定内容显示范围,css之让文字在一定范围内显示，不超过固定的宽度和高度...
首先我们设置类如:.STYLE1 { width:150px; height:80px;color: #000000; border:1px solid #FF0000;} 解决让文字不超出CSS盒子 ...
- java基础57 css样式、选择器和css定位（网页知识）
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一 ...
- 小技巧！CSS 整块文本溢出省略特性探究
大家好,我是若川.欢迎加我微信 ruochuan12,长期交流学习.今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节.点击下方卡片关注我,或者查看源码系列文章. 文本超长打点 我们都知 ...
最新文章
- 9.匿名函数：lambda表达式/filter()/map()
- promise then err_Promise 原理解析与实现(遵循Promise/A+规范)
- 使用 ABAP Open SQL 的 Select AS 别名，提高代码可读性
- 带你玩转 ui 框架 ——scoped及样式穿透问题详解
- C#中创建对象的方式
- Web应用与HTTP协议
- 论文Express | 英伟达最新：多模态无监督图像迁移网络框架
- 52、基于模块化方式安装LAMP
- ibatis中输入/输出各种类型的参数分析及#与$区别 (转)
- 电脑桌面计算机分区不显示,win10硬盘分区不见了怎么办_win10电脑硬盘分区不见了如何恢复...
- 数据库编程之ODBC编程
- 生物信息学: 导论与方法 | 总结笔记
- 这么好用的PDF密码移除器，你知道吗
- 如何修改echarts源码（其他框架也可适用）
- Python之RFM建模分析
- google android win10 ios,Flutter入门安装 ，win10 Android studio 教程
- 用python编程一个图形_Python的图形化窗口编程（1）
- 微信小程序和公众号开发流程
- vue配合element 实现在线预览pdf文档
- qt实现简易图片转换功能