html超过高度隐藏,CSS隐藏超过固定宽度和高度的文字

在制作DIV+CSS页面时候我们常常会遇到文字超出固定的高度也叫内容溢出，等到我们做完整个页面时候内容添加上了后，发现有些地方文字超过了边框内容溢出，甚至文字跑出CSS设置的边框线，如下图：

首先我们设置类如：.STYLE1 { width:150px; height:80px;color: #000000; border:1px solid #FF0000;}，而文字我们也不知道需要多少个文字才刚好不超过设置的红色边框，结果文字或图片大了就超过设置的BOX(CSS盒子)高和宽。

解决让文字不超出CSS盒子的固定高宽我们只需要在此CSS类加入overflow:hidden;样式即可，加入后CSS类：.STYLE1 { width:150px; height:80px;color: #000000; border:1px solid #FF0000;overflow:hidden;}效果即下图：

这样一来文字就将不会溢出超出设置固定的高和宽区。

说明：

Overflow是检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

Overflow语法：

overflow : visible | auto | hidden | scroll

Overflow参数：

visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效

auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条

hidden : 　不显示超过对象尺寸的内容

scroll : 　总是显示滚动条

具体详细了解Overflow可进DIV+CSS网站的在线CSS手册-overflow

作者：css5

html超过高度隐藏,CSS隐藏超过固定宽度和高度的文字相关推荐

html背景图片的隐藏,CSS隐藏图片背景上方的文字内容
使用CSS样式隐藏图片作为背景图片上方的文字内容此类问题我们常见于LOGO处使用,我们想让图片作为背景,而图片上方放A链接文字内容,但html锚文本功能仍然正常也能鼠标点击使用. 一.用到的CSS单 ...
css 文本隐藏,CSS隐藏文字的几个方法
Android:在任务列表隐藏最近打开的app 对于某一个应用,如果不想在最近打开的app列表中留下任何纪录,即按下Home键回到主页,再按任务键的时候,任务列表看不到这个app,在AndroidMa ...
html纵向滚动条隐藏,css隐藏滚动条(横向,坚向)
网上都说使用overflow-y:hiddencss可以隐藏滚动条,但是只能针对div元素,并不能隐藏浏览器,而一些资料说里加入scroll="no",可隐藏滚动条:在里加入st ...
CSS实现不固定宽度和高度的自动居中
有时候我们需要实现下面这种效果: 嘎嘎,撑大高度不让你剧中嘎嘎,撑大高度不让你剧中嘎嘎,撑大高度不让你剧中嘎嘎,撑大高度不让你剧中嘎嘎,撑大高度不让你剧中嘎嘎,撑大高度不让你剧中嘎嘎,撑大 ...
html中设置父盒子的高度,【CSS】设置浮动元素高度等于父元素
最近在练习中发现了这样一个问题: 红色边框为没有设置高度的父元素(.parent),两个子元素(.left,.right)都设置为左浮动,父元素被右边的元素(.right)撑开.现在我想让左边的元素( ...
html图片高度撑开,CSS背景图撑开盒子高度
需求: 给定1980px*1080px背景图,在网页显示时,图片宽度等于浏览器宽度,高度根据原图比例显示对应高度,假设图片最小宽度设置为1024px,则最小高度为1024/(1980*1080)=57 ...
html表格内容溢出隐藏,溢出隐藏：最全的利用css解决内容溢出问题的几种方案...
在p布局中,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱.内容溢出了容器,超出了容器所限定的宽度和高度应该怎么办呢?可以将文本溢出部分进行隐藏或者用省略号代替,那具体 ...
如果不需要CSS隐藏滚动条
本文翻译自:CSS hide scroll bar if not needed I am trying to figure out how I can hide the overflow-y:scro ...
CSS文本超过两行用省略号代替(兼容所有浏览器)
CSS文本超过两行用省略号代替方法一:常规写法(只兼容Chrome内核浏览器) 方法二:可以兼容所有浏览器的方式( js + CSS实现 ) 方法三:可以兼容所有浏览器的方式( 纯CSS实现 ) 方 ...

html超过高度隐藏,CSS隐藏超过固定宽度和高度的文字

html超过高度隐藏,CSS隐藏超过固定宽度和高度的文字相关推荐

最新文章

热门文章