Question

即使标题太长，我也试图使文本适合容器的一行。

<div id="container" style="
    width:360px;
    margin:0 auto;
    background:#f7f7f7;
    box-shadow:0 0 3px rgba(0,0,0, 0.1)">
    <h5 style="
    background:#2980b9;
    color:white;
    margin:0
    padding:10px 20px;">popular</h5>
    <ul style="
    list-style:none;
    margin:0;
    padding:0;">
    {% for x in topStory %}
 <a href='{{ x.get_absolute_url }}'><li class="unique">{{x.title}}</li></a>
    {% endfor %}
    </ul>
    </div>

有办法吗？或者我每次做冠军都要小心点？

Answer 1

white-space: nowrap;

CSS中的

会将其约束为一行。然后你可以做类似的事情：

overflow: hidden;

隐藏它，并且可选地

text-overflow: ellipsis;

使浏览器在剪辑时将“...”放在最后。

Answer 2

你应该使用css属性：

white-space: nowrap;

文档：

http://www.w3schools.com/cssref/pr_text_white-space.asp

即使标题很长，如何自动将文本放入框中

2 个答案: