CODEWITHSUNDEEP
htmlcss
Taboo Loco
Taboo Loco

Reputation: 571

How to limit text width

I would like to limit the width of a block of text so it will look like it has br at the ned of each line.

Something like this:

Texttttttttttttttttttttt
tttttttttttttttttttttttt
tttttttttttttttttttttttt

From this:

Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

I have tried to specify the div's or p's width, but it didn't work for me. Any suggestions?

Upvotes: 36

Views: 191808

Answers (11)

Moiz Sharif
Moiz Sharif

Reputation: 31

div {
   word-wrap: break-word;
   width: 100px;
}

The answer which is signed correct should be updated code like this:

div {
   word-wrap: break-word;
   width: 100%;
}

100px not but 100%.

Upvotes: 0

Babar-Baig
Babar-Baig

Reputation: 779

Many answers here are very good and quite similar. My concern was specifying width in pixels, which means text might look scrunched-up in high-resolution screens. Better to specify width in terms of maximum characters in a row. I also like to specify styling inside the <div> for small, one-file index.html projects. For realistic projects, off-course, the styling should go into a separate css file.

<div style="word-wrap: break-word; max-width: 50ch;>Your text goes here</div>

Upvotes: 1

Bazidoa
Bazidoa

Reputation: 74

word-break:break-all;

did the job for me

from:

qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq

to:

qqqqqqqqqqqqqqqqq

qqqqqqqqqqqqqqqqq

qqqqqqqqqqqqqqqqq

qqqqqqqqqqq

word-wrap: ...

did not work

Upvotes: 0

Lekhraj
Lekhraj

Reputation: 521

 display: inline-block;
max-width: 80%;
height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Upvotes: 15

shailesh mangal
shailesh mangal

Reputation: 322

<style>
     p{
         width:     70%
         word-wrap: break-word;
     }
</style>

This wasn't working in my case. It worked fine after adding following style.

<style>
     p{
        width:     70%
        word-break: break-all;
     }
</style>

Upvotes: 1

ebram khalil
ebram khalil

Reputation: 8321

I think what you are trying to do is to wrap long text without spaces.

look at this :Hyphenator.js and it's demo.

Upvotes: 0

Kamil
Kamil

Reputation: 1641

Try this:

<style> 
p
{
    width:100px; 
    word-wrap:break-word;
}
</style>

<p>Loremipsumdolorsitamet,consecteturadipiscingelit.Fusce non nisl
non ante malesuada mollis quis ut ipsum. Cum sociis natoque penatibus et magnis dis 
parturient montes, nascetur ridiculus mus. Cras ut adipiscing dolor. Nunc congue, 
tellus vehicula mattis porttitor, justo nisi sollicitudin nulla, a rhoncus lectus lacus 
id turpis. Vivamus diam lacus, egestas nec bibendum eu, mattis eget risus</p>

Upvotes: 0

henser
henser

Reputation: 3327

use css property word-wrap: break-word;

see example here: http://jsfiddle.net/emgRF/

Upvotes: 1

Devang Rathod
Devang Rathod

Reputation: 6736

You can use word-wrap : break-word;

Upvotes: 3

Viktor S.
Viktor S.

Reputation: 12815

You can apply css like this:

div {
   word-wrap: break-word;
   width: 100px;
}

Usually browser does not break words, but word-wrap: break-word; will force it to break words too.

Demo: http://jsfiddle.net/Mp7tc/

More info about word-wrap

Upvotes: 58

Vishnu R
Vishnu R

Reputation: 1869

Try

<div style="max-width:200px; word-wrap:break-word;">Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div>

Upvotes: 4

Related Questions