Reputation: 50832

Howto limit the width of a span?

I wonder if it is possible to give a span a maximum width. I tried using the following css

display: block;
max-width: 300px;

But the width gets ignored when the text content of the SPAN doesn't fit into the span.

I would like to cut the visible part of the span to the defined max-width. Is this possible?

Any suggestions?

Upvotes: 0

Answers (4)

Reputation: 565

You have to handle the overflow to avoid expanding.

e.g. Adding:

overflow: hidden; or overflow: auto;

Upvotes: 1

Reputation: 2657

You'll want to use whitespace: nowrap and overflow: hidden on your span to force it all on one line and truncate the text.

Upvotes: 2

Reputation: 192

If I use display: inline-block - the span wraps at 300px or you can use overflow: hidden as suggested by others.

Upvotes: 1

Reputation: 1363

Add overflow:hidden to the css of your span. This will make the text cut off

Upvotes: 1