源地址:http://blog.csdn.net/fb_01/article/details/51345595
1、单行文本超出经常使用省略号,如何判断文本是否超出?
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>test</title>
- <style type="text/css">
- #ellipsis{
- width: 100px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- </style>
- </head>
- <body>
- <div id="ellipsis">今天是你的生日,我的祖国!!!</div>
- <script>
- var clientWidth = document.getElementById("ellipsis").clientWidth;
- var scrollWidth = document.getElementById("ellipsis").scrollWidth;
- if(clientWidth<scrollWidth){
- alert("已省略……");
- }
- </script>
- </body>
- </html>
2、知识点拓展之offsetwidth clientwidth scrollwidth
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
相关推荐
NULL 博文链接:https://zsp.iteye.com/blog/261175
听说用css的 text-overflow: ellipsis 也可以实现,于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap (限制不换行) 和 overflow 属性为 hidden (隐藏溢出...
text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap;三个属性共同使用 text-overflow: clip;ellipsis;string clip: 直接隐藏不显示 ellipse: 用… 三个点来表示溢出的文字 (常用) string:可...
字超出规定范围时,可以用省略号显示,这里我们可以使用text-overflow:ellipsis来实现省略号显示,下面有个不错的示例,感兴趣的朋友可以参考下
首先平时用的时候要配合 复制代码代码如下: overflow: hidden; white-space: nowrap; 这两个属性让起溢出隐藏和不换行,然后IE8用的时候记得不要加 复制代码代码如下: word-berak:break-all;... -o-text-overflow
text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-size:36px; width:400px; } p { text-overflow:ellipsis; overflow:visible; white-space:nowrap; font-size:36px; width:400px; ...
<style type="text/css">... -o-text-overflow: ellipsis; /* Opera */ text-overflow: ellipsis; /* IE, Safari (WebKit) */ [removed]: url('ellipsis.xml#ellipsis'); /* Firefox */ } </style>
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属性并不...
text-overflow:ellipsis; text-overflow: ellipsis;/* IE/Safari */ -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis;/* Opera */ -moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/ } 任意长度...
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏
超过宽度显示省略号(无js无hack全兼容) .
text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-...
text-overflow:clip | ellipsis 这个属性使用必须通过几个属性一块才能使用 1,overflow:hidden; 这个属性是内容区装不下内容应该怎么办。这里让溢出内容直接不显示。这个感觉就是必备的属性。我内容文本溢出全部...
在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap...
text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}img 图片设定高宽后模糊img { width: 100px; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-...
禁用页面滚动条的方法有很多,但最简单、最快的也就数overflow: hidden了,下面是禁用html及body滚动条的方法,兼容IE6、7
text-overflow:ellipsis; white-space:nowrap; course:hand; margin:0 auto;} HTML---------------------- <div class="text">非常多的字数你能控制得了不可能的骗你是小狗</div> ----------------------------...
复制代码代码如下:<!...<HEAD><TITLE> New Document </TITLE>...style tyep=”text/css”>... text-overflow:ellipsis; width:120px; height:20px; font-size:12px;}</style></HEAD><B