代码如下

<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