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问题就消失了!! 我之前一直以为是烘培导致的问题!
随机推荐
- 勤哲excel服务器开发外贸行业薪资考核系统
以外销为驱动的订单行业,外贸业务员的素质直接决定公司效益.然而,大多数外贸公司或以外贸为主的工厂,经常面临外贸业务人员流动性频繁的问题,易 导致客户流失及跟单的困难.科学合理的与业绩挂钩的薪资考核,可 ...
- Java换行符
public static final String NewLineSeparator=System.getProperty("line.separator","\n&q ...
- Nginx静态服务，域名解析
安装这里就不写了在LNMP里有具体的安装 1.1 常用来提供静态Web服务的软件有如下三种: Apache:这是中小型Web服务的主流,Web服务器中的老大哥. Nginx:大型网 ...
- linux中firewall与iptables防火墙服务
火墙firewall-cmd --state 查看火墙的状态firewall-cmd --get-active-zones 目前所处的域firewall-cmd --get-default-zone ...
- MongoDB安装为windows服务
MongoDB 下载 下载地址:http://www.mongodb.org/downloads 下载安装完成之后 第一步 创建D:\Program Files\mongodb\data 目录第二步 ...
- forEach与jdk8中的lambda, Stream
增强for循环 :forEach 反编译后可以看到实际使用的仍然是Iterator+while遍历的 forEach的优点是写法简单,缺点是不能使用xxx.remove(e)或者iter.remove ...
- 练习六十八：pyecharts模块练习
用一个地图显示最热的几个城市温度 代码(用Geo模块) from pyecharts import Geo attr = ["西安","上海","苏州 ...
- docker 设置固定ip、配置网络
Docker安装后,默认会创建下面三种网络类型 $ docker network ls NETWORK ID NAME DRIVER SCOPE 9781b1f585ae bridge bridge ...
- 虚拟机 ----最小安装无法使用vim编辑器
解决办法:安装 yum -y install vim-enhanced.x86_64 帮助网址http://blog.csdn.net/yexudengzhidao/article/details/7 ...
- Unity3d C# 创建 物体
using UnityEngine; using System.Collections; public class create : MonoBehaviour { // Use this for i ...