代码如下
<dl class="dl-horizontal">
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
<dt>慕课网</dt>
<dd>一个专业的，真心实意在做培训的网站</dd>
<dt>我来测试一个标题，我来测试一个标题</dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>
样式如下
<style>
@media(min-width: 768px)
{ /*添加自媒体查询，只有宽度大于768px的设备才会显示该效果*/
.dl-horizontal dt{
float: left;
width:160px; /*定宽*/
text-align: right;
white-space: nowrap; /*文本不换行*/
overflow: hidden;
text-overflow: ellipsis; /*溢出文本添加省略号*/
}
.dl-horizontal dd{
margin-left: 180px;
}
}
</style>
效果如图
屏幕快照 2016-08-24 21.44.44.png
