How can I wrap or break long text/word in a fixed width span?
HtmlCssHtml Problem Overview
I want to create a span with a fixed width that when I type any thing in the span like <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>
, a long string of non-spaced text, the word(s) break or wrap to next line.
Any ideas?
Html Solutions
Solution 1 - Html
You can use the CSS property word-wrap:break-word;
, which will break words if they are too long for your span width.
span {
display:block;
width:150px;
word-wrap:break-word;
}
<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>
Solution 2 - Html
Try following css with addition of white-space
:
span {
display: block;
word-wrap:break-word;
width: 50px;
white-space: normal;
}
Solution 3 - Html
Solution 4 - Html
By default a span
is an inline
element... so that's not the default behavior.
You can make the span
behave that way by adding display: block;
to your CSS.
span {
display: block;
width: 100px;
}
Solution 5 - Html
Try this
span {
display: block;
width: 150px;
}
Solution 6 - Html
Just to extend the pratical scope of the question and as an appendix to the given answers: Sometimes one might find it necessary to specify the selectors a little bit more.
By defining the the full span as display:inline-block you might have a hard time displaying images.
Therefore I prefer to define a span like so:
span {
display:block;
width:150px;
word-wrap:break-word;
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
display:inline-block;
}
img{
display:block;
}
Solution 7 - Html
In my case, display: block was breaking the design as intended.
The max-width
property just saved me.
and for styling, you can use text-overflow: ellipsis
as well.
my code was
max-width: 255px
overflow:hidden