首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

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

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

2nd 模拟场景
我们通过创建一个子元素来替代将要显示的省略号,当文本溢出的情形下该元素显示在正确的位置上。在接下来的实现中,我们创建了一个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="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; }
其他的属性并不改变,效果一样。
继承事业,薪火相传
返回列表