如何用 CSS 实现多行文本的省略号显示

正文

请到「今天看啥」查看全文

div class = "main" >

2.main < br >

float : left < br >

Fairly short text div >

< div class = "end" >

< div class = "realend" >

4.realend < br >

position : absolute div >

3.end < br > float : right

div >

div >

. end {

float : right ; position : relative ;

width : 100px ;

background : # FFA ; }

. realend {

position : absolute ;

width : 100 % ;

top : - 50px ;

left : 300px ;

background : # FAA ; font - size : 13px ; }

这一步中，我们主要关心的是realend元素的定位，基于浮动后的end元素设置偏移量，当end元素浮动到第一节第二章图的位置时（即在prop元素的下方），此时realend元素正好处在end元素的上方50px，右侧300px-100px=200px处，而该位置正是父包含框wrap元素的右下角，此时正是我们期待的结果：

若父元素并没有溢出，那么realend元素会出现在其右侧

这种情况解决很简单，请看下文之第七节，此处仅作实例说明。

3rd 优化定位模型

在第二节中，我们针对end元素设置了相对定位，对realend元素设置绝对定位。但是我们可以采用更为简单的代码来实现，即只使用相对定位。熟悉定位模型的同学应该知道，相对定位的元素仍然占据文本流，同时仍可针对元素设置偏移。这样，就可以去掉end元素，仅针对realend元素设置相对定位。

< div class = "wrap" >

< div class = "prop" > 1.prop < br > float : right div >

< div class = "main" > 2.main < br > float : left < br > Fairly short text div >

< div class = "realend" >

3.realend < br > position : relative div >

div >

. realend {

float : right ;

position : relative ;

width : 100px ;

top : - 50px ; left : 300px ;

background : # FAA ; font - size : 14px ; }

请到「今天看啥」查看全文