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; /*显示的行数*/
}
