CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱。
这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉,又不撑破DIV布局。
特别是在IE6,如果内容超出对象高度和宽度承载,将会被撑破增高,这个时候我们可以利用以下解决方法。
总之要想让内容不超出对象设置宽度高度限定,那就使用overflow:hidden隐藏超出多余部分即可
一、 我们可以使用CSS overflow样式解决
对应样式overflow:hidden
Div{overflow:hidden}
这样设置后,假如DIV对象设置一定宽度高度,此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。
二、超出部分用省略号显示
1、对象设置text-overflow:ellipsis;省略号样式
2、使用nobr标签,强制让内容不换行(css换行、css不换行)。
div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
NOte:
text-overflow语法:
text-overflow : clip | ellipsis
text-overflow参数值和解释:
clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)
text-overflow应用说明:
CSS text-overflow设置或检索是否使用一个省略号标记(...)标示对象内文本文字的溢出。
要想实现显示不完内容将显示省略号代替,还需要html nobr标签完成(nobr禁止换行标签)
white-space
属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的
默认值: normal
继承性: yes
版本: CSS1 JavaScript 语法: object.style.whiteSpace="pre"
实例
规定段落中的文本不进行换行:
p{
white-space: nowrap
} 浏览器支持
所有浏览器都支持 white-space 属性。
注:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
可能的值
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法的更多相关文章
- 用css样式,为表格加入边框
Table 表格在没有添加 css 样式之前,是没有边框的.这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框. 在右侧代码编辑器中添加如下代码: <s ...
- css为超过一定宽度的文本内容自动加上省略号
当在html中某个地方添加文本内容的时候如果内容过长我们会希望他超过一定宽度之后,其余的可以被截断,后面补充为省略号: 实现方式: 1.设置css样式为文本不换行: 2.位包裹文本的标签指定宽度: 3 ...
- div高度根据内容自动增大
1.很多时候我们希望容器高度能够自适应内部元素的变化,需要用到min-height属性. 2.有时候用了min-height还是不会随着内容自适应高度,您需要检查下容器的子元素是不是有浮动属性,当子元 ...
- 学习笔记之CSS样式(选择器背景字体边框绝/相对、固定位置and分层流等)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css 样式文字溢出显示省略号
在table中使用溢出样式,table样式要设置为”table-layout: fixed“,即<table style="table-layout: fixed;"> ...
- 解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题
/*左侧div*/ .left-div{width: 220px;height: 100%;position: fixed;background: #FFFFFF;} /*右侧div*/ .right ...
- 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)
文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...
- DIV未知宽度高度垂直水平居中
使用过一种算是相对来说比较好理解一些的吧算是,代码如下: <style> width:800px; height:400px; margin:0 auto; position:absolu ...
- div box container随主体内容自动扩展适应的实现
/**顶部部分*/ .con-tl{ background:url(../images/left.png) no-repeat 0 0 rgba(0, 0, 0, 0); padding-left: ...
随机推荐
- 【POJ】1008 Maya Calendar
参考:https://blog.csdn.net/u011392408/article/details/28866779 https://blog.csdn.net/qq_36424540/artic ...
- Git更改远程仓库地址
最近在开发一个公司内部的公共组件库.老大整理了git仓库里的一些项目,其中就包括这个项目. 项目git地址变了,于是我本地的代码提交成功后push失败. 查看远程地址 git remote -v 更改 ...
- LEAVE TO LIST-PROCESSING
LEAVE SCREEN 現在の画面の処理を中止し.次の画面を呼び出す - LEAVE TO SCREEN 現在の画面の処理を中止し.動的に定義された次の画面を呼び出す - LEAVE [PROGRA ...
- 也谈js传值和传址
通常的认识就是基本的数值元素是传值,对象等复杂结构传址,无需争论,一试便知. 首先是数值 var a = 1 var b = a a = 2 console.log(a) console.log(b) ...
- MVC中输入的保护验证用:HttpServerUtility.HtmlEncode
安全说明: 上面的代码使用HttpServerUtility.HtmlEncode来保护应用程序的恶意输入 (即 JavaScript).详细信息请参阅如何: 在 Web 应用程序,通过应用 HTML ...
- 美年健康股票成交量和K线关系
看下美年健康的股票,这次主要是研究下成交量和K线的关系,以最后5天为例子,股票下跌成交量降低,说明抛压很小,在最后3天,价格突破的时候,成交量是平时的两倍,说明有机构买入, 业绩部分还可以,全民健身是 ...
- 导入execl到数据库mysql
GwykhrenyuankuList <body jwcid="$content$"> <span jwcid="@components/AppBord ...
- Scala学习笔记(四):从文件里读取文本行
第一个版本: import scala.io.Source if(args.length>0){ for(line<-Source.fromFile(args(0)).getLines) ...
- iOS笔记058 - IOS之多线程
IOS开发中多线程 主线程 一个iOS程序运行后,默认会开启1条线程,称为"主线程"或"UI线程" 作用 显示和刷新界面 处理UI事件(点击.滚动.拖拽等) 注 ...
- python基础篇 05字典
本节主要内容:1. 字典的简单介绍2. 字典增删改查和其他操作3. 字典的嵌套 一. 字典的简单介绍:字典(dict)是python中唯一的一个映射类型.他是以{ }括起来的键值对组成. 在dict中 ...