CODEWITHSUNDEEP
htmlcss
MmD
MmD

Reputation: 2154

How can I wrap or break long text/word in a fixed width span?

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

Answers (7)

Gerard de Visser
Gerard de Visser

Reputation: 8070

Try following css with addition of white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal;
}

Upvotes: 79

sh6210
sh6210

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

leopold
leopold

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

Maxime Lorant
Maxime Lorant

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

Eswara Reddy
Eswara Reddy

Reputation: 1647

Try this

span {
    display: block;
    width: 150px;
}

Upvotes: 2

user2681319
user2681319

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

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

DEMO

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

Upvotes: 19

Related Questions