CSS 将超出显示宽度的内容隐藏起来

实现原理：
（1）指定宽度：width:300px;
（2）overflow:hidden; 将超出内容隐藏
（3）text-overflow:ellipsis; IE 专有属性，当对象内文本溢出时显示省略标记(…)
（4）white-space:nowrap; 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象

代码如下

复制代码

</style>

<div class="textOverFlow"> fdsafdsafdsafdsafdsafdsafdsafdsafsafdsa www.111cn.net </div>

时间： 2024-11-05 06:09:50

CSS 将超出显示宽度的内容隐藏起来的相关文章

重叠-CSS 隐藏/显示一列内容时出现的问题。

问题描述 CSS 隐藏/显示一列内容时出现的问题. <!DOCTYPE> Insert title here th{ background-color:red; } td{ background-color:green; } function tagger(theclass){ var var1 = new Array(); var1 = document.getElementsByTagName('*'); for (var i=0; i<var1.length; i++) { if

CSS小结：一行内文本超出指定宽度溢出的处理

css 看到标题你一定很容易就会想到截断文字加"..."的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为好像还有很多人不记得遇到这样的情况该如何处理. 我们也可以参考52CSS.com以前的文章: CSS对文字溢出时的自动隐藏处理http://www.webjx.com/htmldata/2007-05-05/1178374126.html 如何设置列表(li)超出部分显示省略号http://www.webjx.com/htmldata/2007-05-05/117

html表格table的宽度超出页面宽度时如何不改变table宽度（只显示出滚动条）？

问题描述 html表格table的宽度超出页面宽度时如何不改变table宽度(只显示出滚动条)? 问题如题.条件是不能将table的宽度设置为固定值,因为table包含的列数可能每次查询都不同,可能只有一二列,也可能有几十列,要求每一列宽度能够显示其表格的内容(即列的宽度按内容长度显示),如果table宽度没有超出页面宽度就不显示滚动条,也不拉伸表列宽度:如果table宽度超出页面宽度,就显示滚动条,而不压缩表列宽度. 解决方案 http://blog.sina.com.cn/s/blog_66

html table中td内容超出显示...怎么实现

问题描述 html table中td内容超出显示...怎么实现,效果如下解决方案 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Untitled</title> <style type="text/css"> table { width:250px; table-layout:f

用CSS使图片自适应显示宽度

公司的项目中需要显示由用户提供URI链接的图片,可是预先无法获知图片的尺寸大小,如果图片尺寸过大将会影响页面布局.最理想的解决方案自然是自动生成缩略图,涉及的后台工作较为复杂,用CSS进行控制是一个可以接受的捷径. 如果用width属性强行设定显示尺寸似乎太不智能.幸好Firefox/Opera/IE7都提供了max-width属性支持.假定希望图片显示宽度不超过500像素,CSS可能如下: fit-image{ border :0; max-width:500px; } 让我痛恨的IE6不支持

CSS代码如何使图片自适应显示宽度

图片尺寸过大将会影响页面布局.最理想的解决方案自然是自动生成缩略图,涉及的后台工作较为复杂,用CSS进行控制是一个可以接受的捷径. 如果用width 属性强行设定显示尺寸似乎太不智能.幸好 Firefox/Opera/IE 7 都提供了 max-width 属性支持.假定希望图片显示宽度不超过500像素,CSS可能如下: 以下是引用片段: 以下是引用片段: fit-image { border : 0; max-width : 500px; } IE6 不支持 max-width 属性,但是利用

android webview内容超出屏幕宽度

问题描述 android webview内容超出屏幕宽度我用webview的loaddatawithbaseurl加载html字符串,但是内容的宽度超出屏幕的宽度了,网上搜的setlayoutalgorithm方法没用啊!我想要的效果是内容最多只显示屏幕的宽度,多了就进入下一行,以上方法无效,4.4版本以上就不行了解决方案 webview是可以滚动的解决方案二: Android 获取WebView的内容宽度高度

JS实现隐藏同级元素后只显示JS文件内容的方法_javascript技巧

本文实例讲述了JS实现隐藏同级元素后只显示JS文件内容的方法.分享给大家供大家参考,具体如下: 这里的demo.html文件在打开后会短暂显示与js文件同级的元素后马上隐藏这些元素,并显示同级的demo.js文件内容.具体代码如下: demo.html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title><

有一个div,高度190px,div的内容超过了本身的高度，我想隐藏前面的内容，显示最后的内容，牛人告诉我该怎么做...

问题描述如题,在线等>....速度求解决方案解决方案二:设置竖向滚动到最底解决方案三:我就是不想用滚动条,当div的内容高度大于div本身高度时,增加一倍div的高度,但显示的内容应该是190px到380px的内容,而0至190px的内容隐藏,最好是用jquery产生动画滑动效果解决方案四:<scripttype='text/javascript'src='jquery-1.4.2.min.js'></script><divid="div1"s