源于生活

标题: 溢出超出DIV边框的内容自动隐藏方法 [打印本页]
作者: kevin-ying    时间: 2014-8-2 12:29
标题: 溢出超出DIV边框的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
平时我们布局时候，有的文字内容多了会超过溢出我们限制的高度，有的图片会撑破DIV，让网页错位变乱。
这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。
特别是在IE6，如果内容超出对象高度和宽度承载，将会被撑破增高，这个时候我们可以利用以下解决方法。
一、解决CSS样式   -   TOP
这时我们可以使用CSS overflow样式解决：
对应样式overflow:hidden
  1. Div{overflow:hidden}
复制代码

这样设置后，假如DIV对象设置一定宽度高度，此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。

二、隐藏超出内容案例  
1、隐藏超出对象宽度高度文字内容
假如我们在一个布局中为了美观对齐，有时我们需要设置了对象高宽后就固定了，这个时候需要实现无论多少内容文字都不要超出设置宽度高度布局，这个时候我们需要overflow:hidden帮忙。
CSS代码：
  1. <style>
  2. .divcss5{ width:300px; height:50px; line-height:25px; overflow:hidden}
  3. /* 设置对象高度宽度，同时设置overflow:hidden */
  4. </style>
复制代码


Html代码：
  1. <div class="divcss5">欢迎来到DIVCSS5网，
  2. 在这里你可以学习CSS同时也可以下载需要的资源，
  3. 同时可以找到自己常见问题答案</div>
复制代码


隐藏多余文字内容方法案例截图
[attach]530[/attach]
CSS隐藏溢出内容方法示范截图
这样设置了overflow:hidden无论多少内容都会隐藏对象设置宽度和高度以外装不下的内容。
2、隐藏超出对象宽度的图片部分案例
这里设置一个一定CSS宽度和CSS高度的对象盒子，放一个大的图片，然后使用overflow:hidden隐藏其超出部分。
Css代码
  1. <style>
  2. .divcss5{ width:300px; height:50px; line-height:25px; overflow:hidden}
  3. /* 设置对象高度宽度，同时设置overflow:hidden */
  4. </style>
复制代码


Html代码
  1. <div class="divcss5">
  2. <img src="http://www.divcss5.com/uploads/allimg/130219/1_130219231214_1.jpg" />
  3. </div>
复制代码


截图
本身图片大小为：
[attach]531[/attach]
案例原始大图片
[attach]532[/attach]
DIV CSS隐藏后截图
设置宽度和高度，虽然图片大
总结要想让内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可。

作者: kevin-ying    时间: 2014-8-4 10:05
css实现图片横向排列，溢出隐藏\滚动条横向拖动关键样式：

  1. white-space:nowrap;/*内容横向排列不换行*/

  3. overflow-x:auto;　　overflow-y:hidden;/*隐藏溢出部分。横向滚动条自动出现，纵向滚动条隐藏*/
复制代码




预览代码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <meta. http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>css实现图片横向排列，溢出隐藏横向滚动</title>
  6. <style. type="text/css">
  7. <!--
  8. .inimg {width:670px;height:395px;white-space:nowrap;overflow-x:auto;overflow-y:hidden;}
  9. .inimg img {width:670px;height:375px;}
  10. -->
  11. </style>
  12. </head>
  13. <body>
  14. <div class="inimg">
  15. <img src="" _fcksavedurl="" width="670" height="375" alt="img" />
  16. <img src="" _fcksavedurl="" width="670" height="375" alt="img" />
  17. <img src="" _fcksavedurl="" width="670" height="375" alt="img" />
  18. <img src="" _fcksavedurl="" width="670" height="375" alt="img" />
  19. </div>
  20. </body>
  21. </html>
复制代码





作者: kevin-ying    时间: 2015-8-13 21:53
让DIV,LI等元素超出部分文字用省略号…显示。

兼容IE/Firefox/Chrome

代码：
  1. display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
复制代码



作者: vingoo    时间: 2018-8-29 12:54
[CSS] 纯文本查看 复制代码
overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行

作者: vingoo    时间: 2018-8-29 12:55
[CSS] 纯文本查看 复制代码
overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行

//上面是一行内容的时候，当有两行的内容时候
[CSS] 纯文本查看 复制代码
overflow: hidden;

text-overflow: ellipsis;

display:-webkit-box; //作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列

-webkit-line-clamp:2; //显示的行





欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1