how to automatically fit texts into box even if the title is long

Question

I'm trying to make the texts to be fit in one line of a container even if the title is too long.

<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>

Is there a way to do that? or I have to be careful every time I make a title?

Answer 1

white-space: nowrap;

in CSS will constrain it to one line. Then you can do stuff like:

overflow: hidden;

to hide it and, optionally,

text-overflow: ellipsis;

to make the browser put a "..." at the end when it clips.

Answer 2

You should use the css property:

white-space: nowrap;

Doc:

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