单行溢出隐藏没生效_溢出隐藏：最全的利用css解决内容溢出问题的几种方案

在p布局中，有的文字内容多了会超过溢出我们限制的高度，有的图片会撑破DIV，让网页错位变乱。内容溢出了容器，超出了容器所限定的宽度和高度应该怎么办呢？可以将文本溢出部分进行隐藏或者用省略号代替，那具体如何实现呢？本文就告诉你如何使用换行，省略号等方式来解决这些溢出的问题。

一、利用换行来解决溢出问题

word-break:break-all和word-wrap:break-word经常用来解决长字符串换行问题。word-break:break-all在IE6/7/chrome/safari为一派，表现为尾部截断，而ff3.0/opera表现为无效。既过长单词换行显示，然后溢出边界。word-wrap:break-word;在IE6/7/chrome/safari为一派表现为长单词换行，再显示不下才裁切。而ff3.0/opera也表现为无效。

文本过长，在容器内显示不下的时候，是否要换行，使用white-space : normal / nowrap属性，normal : 采用浏览器默认设置；nowrap : 不换行。

溢出后的处理方式,若是想隐藏溢出的内容，可以考虑使用 text-overflow 属性。

css强制不换行,溢出隐藏：overflow:hidden

使用说明及要点：

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

◎ 设置textarea对象为hidden值将隐藏其滚动条。

◎ 对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到◎ 右边或左边(视direction属性设置而定)的单元格。

◎ 自IE5开始，此属性在MAC平台上可用。对应的脚本特性为overflow。

二、利用省略号来解决溢出问题

一般用p+css的容器中文字超出长度会浮动到框外或者把框撑大，有时候需要考虑浏览器兼容问题，不同浏览器对CSS标准执行也是不同的。由于Firefox是公认的标准浏览器[当然, Opera也是], 且市场份额更高, 因此可以拿Firefox来作认证。

在项目中，由于实际描述文字过多，导致初始页面纵向长度过长，也使得余下信息利用率降低；所以在文字过多的时候，初始化限制行数是有必要的，CSS单行多行文本溢出，显示省略号。

在前端页面布局中，经常会有因文字过多而影响页面排版。特别是在移动端页面中，因屏幕宽度不够段落文字如完全显示则会打乱布局。因此若段落文字能根据屏幕空余大小而显示就完美了，也就是若屏幕够大，段落文字就完全显示，若屏幕很小，则段落文字以省略号的形式部分显示。

我们知道当我们在table里输入过多的文字内容的时候会撑乱表格，例如一行显示过长或者自动换行。可是有的时候我们就想在固定宽度的一行中显示，如果多出的部分那就用点点点代替，这样就不会撑乱表格了。

步骤一：内容超出宽度时隐藏超出部分的内容

步骤二：当对象内文本溢出时显示省略标记(...)

有关CSS内容溢出和隐藏的问答

【相关推荐】

单行溢出隐藏没生效_溢出隐藏：最全的利用css解决内容溢出问题的几种方案相关推荐

html表格内容溢出隐藏,溢出隐藏：最全的利用css解决内容溢出问题的几种方案...
在p布局中,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱.内容溢出了容器,超出了容器所限定的宽度和高度应该怎么办呢?可以将文本溢出部分进行隐藏或者用省略号代替,那具体 ...
单行溢出隐藏没生效_至今没搞懂，为什么这个缸这么火？
[首先] 用主石-火山岩来做个隐藏的过滤看看这块火山岩的各个角度火山石隐藏过滤制作开始第一步50mm钻头开孔 (好像听到了耳膜挣扎的呐喊) 40mm钻头再次掘进 30mm钻头再次掘进用12mm ...
单行溢出隐藏没生效_小Tip：关于单行/多行文本溢出隐藏的一些看法
最早的文本溢出隐藏只是简单的hidden,把看不见的都给"去掉",就像这样: 哈哈哈哈哈哈哈哈哈哈哈 .hid{ width: 100px; height: 20px; overf ...
计算机语言输入不见了,win7右下角的输入法图标不见_右下角的输入法没了_右下角的语言栏不见了的解决方法...
最近有很多同事说在工作中有时候电脑用着用着右下角的输入法图标却没有了,让人觉得很不习惯.对于这种情况要怎么把右下角的语言栏调出来呢?一般是重新启动一下电脑,但是大部分电脑重启了还是一样没有显示右下角的 ...
计算机屏幕尺寸不是全屏,电脑屏幕有黑边撑不满怎么办_电脑屏幕不能全屏显示的解决方法...
电脑屏幕有黑边撑不满怎么办?平时在使用电脑时候,如果是新手,可能会出现显示屏不能全屏显示的问题,有些情况是分辨率的问题,调整一下就好了,但有时候调整了也没有用,那么该怎么办呢?下面智能手机网小编来具体 ...
html overflow隐藏滚动条,css 之内容溢出滚动，隐藏滚动条
解决火狐浏览隐藏不了滚动条问题 1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器 .outContainer { width:350px; height:300px; overf ...
excel链接隐藏工作表_自动隐藏Excel工作表
excel链接隐藏工作表 When you build a workbook for other people to use, there might be worksheets that can s ...
spring.profiles.active配置了没生效_一文带你彻底学会 Git Hooks 配置
你好,我是小桔,是一个没有感情的代码崽. 今天给大家介绍一下 Git Hooks,相信 Git 大家都在用吧,Git 除了用作版本控制,还有许多高级功能,Git Hooks 就是其中之一. 本文环境: ...
12如何隐藏dock栏_一键隐藏 iPhone 刘海和底部 Dock 栏，简洁又好看
技能: 隐藏刘海和底部dock 栏难度系数:2颗星适用系统:iOS 13(部分非iOS13也适用) 最近,小雷打开手机,看到最多的关键词,就是:iOS13又双叒叕更新了... 而且也看到不止一位网 ...

单行溢出隐藏没生效_溢出隐藏：最全的利用css解决内容溢出问题的几种方案

单行溢出隐藏没生效_溢出隐藏：最全的利用css解决内容溢出问题的几种方案相关推荐

最新文章

热门文章