Reputation: 2154
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?
Upvotes: 135
Views: 331363
Reputation: 8070
Try following css with addition of white-space
:
span {
display: block;
word-wrap:break-word;
width: 50px;
white-space: normal;
}
Upvotes: 79
Reputation: 4540
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
Upvotes: -1
Reputation: 2061
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;
}
Upvotes: 0
Reputation: 36181
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>
Upvotes: 235
Reputation:
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;
}
Upvotes: 3
Reputation: 8981
Like this
li span{
display:block;
width:50px;
word-break:break-all;
}
Upvotes: 19