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
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;
}
Try this
span {
display: block;
width: 150px;
}
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;
}
Try following css with addition of white-space
:
span {
display: block;
word-wrap:break-word;
width: 50px;
white-space: normal
}
Source: Stackoverflow.com