css用一个div怎样实现顶端低端无间距,中间有间距的效果?


只在一个div中实现,还有其中的文字并不确定是多少,有可能是一行,有可能是3行,超过3行要加
...省略号。
用line-height的话有上下居中效果,但第一行上边和第三行下边没有距离,该怎么制定css呢
图片描述

web前端开发 HTML css

chuenyi 9 years, 6 months ago

http://jsfiddle.net/SkyWatcher/03b8pehL/

上下间距自己调整,设置的是10px

arbiter answered 9 years, 6 months ago

单行可以实现...,多行的话你就真把css当js来使了

小魂儿财团 answered 9 years, 6 months ago

纯css不能实现三行省略号。

不过三行实现上下贴边的效果可以用嵌套div。
外层的div高度固定,并设置,overflow:hidden.
里层div看情况设定高度就行了。

Massets answered 9 years, 6 months ago

不知道你是要第一和三行有距离的效果还是没有距离的效果呢?
如果是有距离的话那么可以在外层div上设置上下 padding 值来达到效果,这样的话 line-height 的值相应的就要有所调整。
至于高度的问题可以通过 max-height 结合 overflow:hiden 来设置实现最多只显示三行的效果,但是超过三行之后不会加上省略号,除非用js来截断实现。

下降气流君 answered 9 years, 6 months ago

上下无间距可以设置:margin-top: - px;margin-bottom: - px;
超过三行加省略号:这种一般让后台程序员实现。这里有js的方法实现的解答 http://segmentfault.com/q/1010000002766666

工口大魔神 answered 9 years, 6 months ago

超过3行然后用...代替隐藏文字,这个css是做不到的,不过可以用javascript来控制;

筷子要5角 answered 9 years, 6 months ago

js实现如下:


 function()
            {
                 var maxwidth=15;
                 if($(this).text().length>maxwidth)
                 {
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).text($(this).text()+'......');
                 }
            }

maxwidth是你要设置的最大字符

SKY凝固 answered 9 years, 6 months ago

Your Answer