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>

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  <!-- 就这三句,,,嘿嘿....->

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有