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














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




 




 





文章评论


 





												


																

最新文章
	

    
						
  1. Dapper：The member of type SeoTKD cannot be used as a parameter Value
		
    2. 
						
  2. C++静态库与动态库
		
    3. 
						
  3. ASP.NET页面传值不使用QueryString
		
    4. 
						
  4. 浅谈可扩展性框架：MEF
		
    5. 
						
  5. OverHust
		
    6. 
						
  6. 题目1434：今年暑假不AC （项目安排类：结束时间快排，判断开始时间）
		
    7. 
						
  7. Linux下php安装phpredis
		
    8. 
						
  8. UML for Design Pattern
		
    9. 
						
  9. 解决kibana 4 关于响应时间的问题
		
    10. 
						
  10. git 关键词扩展
		
    11. 
						
  11. JS 数组、对象的深拷贝
		
    12. 
						
  12. mac与windows共享键盘鼠标(synergy)
		
    13. 
						
  13. Luogu P1082 同余方程(NOIP 2012) 题解报告
		
    14. 
						
  14. Spark Streaming简介及原理
		
    15. 
						
  15. 【反射】利用java反射原理将xml文件中的字段封装成对应的Bean
		
    16. 
						
  16. 20180518VSTO多簿单表汇总外接程序按钮
		
    17. 
						
  17. object SparkStreaming_StateFul {
		
    18. 
						
  18. jdk1.8配置环境变量
		
    19. 
						
  19. webpack配置实践
		
    20. 
						
  20. platform device和platform driver简述
		
    21. 
		

	


热门文章
	

    
									
  1. 线段树【洛谷P2894】 [USACO08FEB]酒店Hotel
			
    2. 
						
  2. springloud系列搭建注册中心
			
    3. 
						
  3. Ubuntu系统升级遇到问题记录
			
    4. 
						
  4. P1060 开心的金明（动态规划背包问题）
			
    5. 
						
  5. ubuntu中误删/var/lib/dpkg/info的补救方法
			
    6. 
						
  6. 复制虚拟机出现”适配器 的mac地址在保留地址范围内‘’
			
    7. 
						
  7. Message Unable to connect to SQL Server &#39;(local)&#39;
			
    8. 
						
  8. 转 Python 多进程multiprocessing.Process之satrt()和join()
			
    9. 
						
  9. AVplayer搭建ftp共享PC端
			
    10. 
						
  10. JobService 7.0 定时任务不生效
			
    11.