常用样式——文本换行和溢出省略

1、文本换行

右侧换行.png

  如图所示，想要实现左侧宽度不固定，自适应，但不换行，右侧宽度不固定，但是换行，并且换行之后缩进。

<li class="detail">
    <span class="title">租期：</span>
    <span class="des">2014年12月12日至2018年12月12014年12月12日至2018年12月12日2014年12月12日至2018年12月12日2014年12月12日</span>
</li>

.box {
  background-color: #2d2d2d;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  .detail {
    line-height: 40px;
    .title {
      color: #a9a9a7;
    }
    .des {
      color: #fafafa;
    }
  }
}

默认的上述样式，实现的效果如下图：

无缩进.png

右侧换行没有缩进，想要实现第一张图上的效果，非常简单，只需要加两行：
在父级.detail上添加display: flex;，在.title上添加不换行white-space: nowrap;如下：

.box {
  background-color: #2d2d2d;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  .detail {
    display: flex;
    display: -webkit-flex; /* Safari */
    line-height: 40px;
    .title {
      white-space: nowrap;
      color: #a9a9a7;
    }
    .des {
      color: #fafafa;
    }
  }
}

效果预览：https://jsfiddle.net/xiaowoniu/a30jwzdz/

2、css3实现文本溢出显示省略号

（1）单行文本溢出显示省略号

<p>这是一篇长长的文章，没完没了的讲述一个故事，从前有座山，山里有座庙，庙里有个老和尚，老和尚在给小和尚讲故事</p>

p {
  width: 200px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

（2）多行文本溢出显示省略号

p {
  width: 200px;
  overflow: hidden;  
  display: -webkit-box;
  -webkit-box-orient: vertical; /*使用该属性的前提是display:box;*/
  -webkit-line-clamp: 4; /*显示的行数*/
}

效果预览：https://jsfiddle.net/xiaowoniu/2yvd3o6w/1/