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实现限制一行字数的显示，超出的部分用省略号（....）来代替
<div style="width:200px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
border:1px solid red">
试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看
</div>
语法：
text-overflow : clip | ellipsis
参数：
clip : 不显示省略标记（...），而是简单的裁切（clip这个参数是不常用的！）
ellipsis : 当对象内文本溢出时显示省略标记（...）
说明：
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
请您注意，text-overflow:ellipsis属性在FF中是没有效果的。
示例：
div { text-overflow : clip; }
text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50 个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text- overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样 才能实现溢出文本显示省略号的效果。
有的时候的某段文本太长了，会影响整个的布局，很多人用动态语言来解决这个问题，但必须区分中文和英文，因为中文相当于两个英文字符长度，这样不仅繁琐，而且加重了服务器的负担。其实，我们完全可以使用CSS完美解决这个问题，
<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div>
效果：
语法：
text-overflow : clip | ellipsis
参数：
clip : 不显示省略标记（...），而是简单的裁切
（clip这个参数是不常用的！）
ellipsis : 当对象内文本溢出时显示省略标记（...）
说明：
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
请您注意，text-overflow:ellipsis属性在FF中是没有效果的。
示例：
div { text-overflow : clip; }
text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50 个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text- overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样 才能实现溢出文本显示省略号的效果。
有的时候的某段文本太长了，会影响整个的布局，很多人用动态语言来解决这个问题，但必须区分中文和英文，因为中文相当于两个英文字符长度，这样不仅繁琐，而且加重了服务器的负担。其实，我们完全可以使用CSS完美解决这个问题，
white-space:nowrap;overflow:hidden;text-overflow:ellipsis; <!-- 就这三句,,,嘿嘿....->
文章评论
html实现钝角效果；html实现限制一行字数的显示，超出的部分用省略号（....）来代替的更多相关文章
- iOS 7.1 UITableView添加footerView 后 最后一行分割线无法显示
今天用故事版 遇到个奇怪的问题: 我要用 tbView(tableView)展示写信息.最后一行我要显示些文案什么的.考虑用 footerView ,开心coding ..,show下 哪里有些不对吧 ...
- 如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）
写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签 text-overflow , ...
- CSS一行显示，显示不下的用省略号显示
CSS一行显示,显示不下的用省略号显示 .abc{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 复制上面代码即可 ...
- 解决TextView在显示文字的时候，一行还没显示满就跳到下一行
转载请注明:转自 http://blog.csdn.NET/u011176685/article/details/48295185 一.问题描述: Android的TextView在显示文字的时候,如 ...
- js效果-多选只能选两项,如果超出自动取消第一次选的
这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨 <!DOCTYPE> <html> <head> <title> ...
- css一行内容过多显示省略号
四个缺一不可. 效果如下图
- android中使用afinal一行源码显示网络图片
下面代码是关于android中使用afinal一行显示网络图片的代码. public class DemoActivity extends FinalActivity { @Override publ ...
- css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失
一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...
- 摄像机导致的粒子效果混乱出错变成贴图sprite显示在镜头前
只要把出错的摄像机记的标签改成maincamera问题就消失了!! 我之前一直以为是烘培导致的问题!
随机推荐
- 老男孩Day7作业：选课系统
1.作业需求:角色:学校.学员.课程.讲师 1. 创建北京.上海 2 所学校 2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开 3. 课程包 ...
- Linux下的hosts文件和network文件区别
Linux下的hosts文件和network文件区别 Linux下有两种与计算机名相关的配置文件 1.hosts文件,路径:/etc/hosts,此文间是在网络上使用的, 用于解析计算机名 ...
- linux线程池
typedef struct task_node { void *arg; /* fun arg. */ void *(*fun) (void *); /* the real work of the ...
- 安装maven时遇到的问题
配置好环境变量和本地仓库后,在命令行里输入mvn compile,可以显示成功,但是mvn install后就一直失败.显示如下错误: 在idea中显示如下错误: 其实即使显示编译成功,但并没有真正的 ...
- 使用instsrv.exe和srvany.exe将应用程序安装成windows后台服务
好的参考链接: http://www.jb51.net/softjc/374631.html 利用这两个工具,将 exe程序或者 bat文件,做成Windows后台服务.
- shell操作数组
#!/bin/bash nums=( ) echo ${#nums[*]} #向数组中添加元素 nums[]="http://c.biancheng.net/shell/" ech ...
- Exadata扩展
所谓Exadata扩展,也即向现有的Exadata环境中增加新的数据库服务器或存储服务器. 扩展原则 可以依循以下规则扩展Exadata: (1).可以将Exadata从某种固定配置扩展到另一种固定配 ...
- css3文本域焦点烟花效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Kibana6.2.x 插件理解
官方地址:https://www.elastic.co/guide/en/kibana/current/development-uiexports.html Type Purpose hacks An ...
- light oj 1047 - Neighbor House(贪心)
The people of Mohammadpur have decided to paint each of their houses red, green, or blue. They've al ...