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

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

  •  01-07-2023
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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 */
}

OTHER TIPS

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top