Text with space inside inline-block with fixed width creates new line

StackOverflow https://stackoverflow.com/questions/22992101

  •  01-07-2023
  •  | 
  •  

Frage

When inserting text with spaces inside a span that has display: inline-block and fixed width, a new line is created on each space character.

I need the fixed width to limit long text, and eventually put couple of these next to each other horizontally. The new line bug prevents me from doing it.

HTML to demonstrate the weird behavior: 

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .style
        {
            display: inline-block;
            width: 30px;
            border: 1px solid red;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div>
        <span class="style">Long Text With spaces</span>
    </div>
    <div>
        <span class="style">LongTextWithoutSpaces</span>
    </div>
</body>
War es hilfreich?

Lösung

So you dont want the text to wrap?

DEMO

.style {
    display: inline-block;
    width: 30px;
    border: 1px solid red;
    overflow:hidden;

    white-space: nowrap; /* add this */
}

Andere Tipps

You need to add white-space: nowrap; to your CSS.

I'm not 100% sure what you're after as this behaviour doesn't seem weird to me. But I suspect what you want is word-break:break-all . live demo http://jsfiddle.net/sitrobotsit/9z3hp/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top