white-space和table-layout实现文本过长但只在一行显示（心酸CSS学习路程一）

原创

于 2018-03-15 15:41:22 发布 · 658 阅读

1 ·

CC 4.0 BY-SA版权

在手机端页面设计中，通过设置table-layout为fixed和white-space为nowrap，配合text-overflow: ellipsis，可以实现无论文本长度如何，都限制为一行显示并隐藏多余内容，避免横向滚动条的出现。

1.当前效果
这里写图片描述
代码如下（使用了bootstrap，不影响）

<div class="container">
    <div class="row">
        <table class="table">
            <thead>
                <tr>
                    <th>新闻&amp;通知</th&g

最低0.47元/天解锁文章