CSS: Limit Element to 1 Line

CSS: limit element to 1 line

It is possible:

element (white-space: nowrap; overflow: scroll;)

Text parsed as HTML or XML is tokenized, which means all runs of whitespace are collapsed to a single space character. This means you will have a single line of text unless you specify something in addition to the overflow declaration that could cause your text to wrap.

EDIT: I failed to include the necessary write-space: nowrap property, otherwise the default is that a container will scroll vertically opposed to horizontally.

css overflow - only 1 line of text

If you want to restrict it to one line, use white-space: nowrap; on the div.

How can I force div contents to stay in one line with HTML and CSS?

Try this:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

How to limit a table cell to one line of text using CSS?

overflow will only work if it knows where to start considering it overflown. You need to set the width and height attribute of the <td>

TAKE 2

Try adding table-layout: fixed; width:500px; to the table's style.

UPDATE 3

confirmed this worked: http://jsfiddle.net/e3Eqn/

Restrict p to one line and ellipsize when necessary?

This is the exact one you are looking for. Its a jQuery plugin. Once you add this plugin, all you have to do is wrap it in a div like this. It automatically wraps based on the text size you specify.

<ul>
  <li>
    <div class="expandable">
        <p>Some long text here</p>
    </div>
  </li>
</ul>

Limiting the number of characters per line with CSS

You can set the width of the p to as much as 30 characters and next letters will automatically come down but again this won't be that accurate and will vary if the characters are in capital. Just see this example:

p {
  max-width: 30ch;
}

div container: limit to text going on one line to right

Remove white-space:nowrap; (and eventually add word-wrap: break-word; to respect your div boundaries with your no-spaced long word) to send the text to new lines;

add overflow-x: scroll; if you instead want the text in one single line but want to have an horizontal scrollbar inside your fixed width div: http://jsfiddle.net/4uxcN/10/

---

Related Topics