css控制不溢出,不换行,溢出部分省略号显示：white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

一、text-overflow省略号样式语法结构  

text-overflow语法：
text-overflow : clip | ellipsis

text-overflow参数值和解释：
clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（...）

二、text-overflow应用案例   

三、Overflow可以实现隐藏超出对象内容，同时也有显示与隐藏滚动条的作用

2、案例描述
      我们假设3个标题的li列表布局，对li对象设置一定宽度和高度，对前两个li列表内容放过多测试文字，第三个li列表放入可显示完测试文字。因为我们要避免内容过多撑破对象，所以我们对li再设一个overflow:hidden css样式，用于css隐藏超出内容，避免内容过多溢出li对象。

  1. <style type="text/css"> 
  2. *{ 
  3.  padding:0;
  4.  margin:0
  5. } 
  6. a{ text-decoration:none;
  7. color:#6699ff
  8. } 
  10. ul,li{ 
  11. list-style:none;
  12.  text-align:left
  13. } 
  14.  
  15. #divcss5{
  16. border:1px #ff8000 solid; 
  17. padding:10px; width:150px; 
  18. margin-left:10px; 
  19. margin-top:10px
  20. } 
  21. #divcss5 li{
  22. width:150px;
  23. height:24px;
  24. line-height:24px;
  25.  font-size:12px; 
  26. color:#6699ff;
  27. overflow:hidden;
  28. text-overflow:ellipsis; 
  29. border-bottom:1px #ff8000 dashed;
  30. } 
  31. #divcss5 li a:hover{ 
  32. color:#333
  33. } 
  35. </style> 
  36. </head> 
  37. <body> 
  38. <ul id="divcss5"> 
  39. <li><a href="#"><nobr>&#8226; 显示不完显示省略号，测试内容</nobr></a></li> 
  40. <li><a href="#"><nobr>&#8226; 第二排测试内容超出显示省</nobr></a></li> 
  41. <li><a href="#"><nobr>&#8226; 能显示完几个字</nobr></a></li> 
  42. </ul> 
  43. </body> 
  44. </html> 
posted @   双手插在裤兜谁也不爱  阅读(421)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript 判断字符串是否包含某个字符串
· vue3 + vue-clipboard3 复制文本到剪切板
· html+css文本超出显示省略号
· 文本溢出用省略号代替
· 查漏补缺——说说text-overflow: ellipsis;
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae