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完美解决这个问题，

如何实现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;  <!-- 就这三句,,,嘿嘿....->

发布此文章仅为传递网友分享，不代表本站观点，若侵权请联系我们删除，本站将不对此承担任何责任。

 

旅行，写作，编程

鲜为人知的编程真相

Java 与 .NET 的平台发展之争

我的丈夫是个程序员

2013年中国软件开发者薪资调查报告

科技史上最臭名昭著的13大罪犯

程序员的鄙视链

做程序猿的老婆应该注意的一些事情

HTML/CSS-热门HTML/CSS-最新HTML/CSS-其它

• 1CSS经典布局之弹性格局
• 2html例证
• 3bootstrap-组件之旋钮式下拉菜单
• 4div均匀分布代码范例
• 5相关Node、Element，HTMLCollection、NodeList
• 6CSS/CSS3惯用样式小结
• 7【HTML】仿淘宝五星评估显示任何分数
• 8input文本框实现宽度自适应代码范例，input文本框
• 9Gulp帮你自动搞定coffee跟scss的compile
• 10超市导航代码

 

• 上一篇：html form onsubmit函数解释，input、submit、button的差异
• 下一篇：CSS进度条展示

文章评论

 

相关解决方案

• 1CSS 超出掩藏实现限制字数的功能代码(多浏览器)
• 2CSS 超出隐藏实现限制字数的效能代码(多浏览器)
• 3css 只好显示两行 超过显示点点点
• 4UITextField限制字数步骤
• 5php中怎么对输出的文章限制字数，剩余的用“.”表示
• 6fck控件如何限制字数
• 7uitextField限制字数步骤和抖动效果
• 8文本框怎么实现限制输入字数效果
• 9【安卓】让子元素超出容器限制、怎么实现更灵活的容器布局、
• 1