How to align DIV contains String with no Spaces

Question

I have a Dynamic String with no Spaces

i.e: 12345678912345678912345634589 // This is a dynamic content from php.

And i have a DIV with 200px width So this String is going out of the DIV if there is no spaces in the String. How can i fix it? I want this string started from New Line when it reaches the width limit of 200px.

I have also made a JsFiddle DEMO :

http://jsfiddle.net/ACF7N/6/

Use Word-wrap:break-word css property – Manish Parmar Sep 12 '13 at 13:36 — Manish Parmar, Sep 12 '13 at 13:36

score 4 · Answer 1 · answered Sep 12 '13 at 13:33

4

div {
    word-break: break-all;
}

http://www.w3schools.com/cssref/css3_pr_word-break.asp

answered Sep 12 '13 at 13:33

Grim...

16,518
7
45
61

In case you wanted to know which browsers support it: http://caniuse.com/word-break – technophobia Sep 12 '13 at 13:35
If you are wondering what the difference between `word-break` and `word-wrap` is (both work), the answer is here: http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break – Grim... Sep 12 '13 at 13:35
1

@technophobia I wasn't aware that browser support was being dropped. Use the answer that nnnnnn gave instead. – Grim... Sep 12 '13 at 13:37
You misunderstood, I was just sharing a resource to help him identify which browser support the feature - that is all! :) – technophobia Sep 12 '13 at 13:40
Absolutely - but as less browsers support word-break (and that looks like it will get worse as time goes on) the OP would be much better off using word-wrap. I thought both were pretty much globally implemented, but clearly that's not the case. Bloody Opera =] – Grim... Sep 12 '13 at 13:47

score 2 · Answer 2 · answered Sep 12 '13 at 13:33

2

Add this CSS:

word-wrap : break-word;

Demo: http://jsfiddle.net/ACF7N/7/

answered Sep 12 '13 at 13:33

nnnnnn

147,572
30
200
241

Venkata Krishna · Answer 3 · 2013-09-12T13:41:54.243

0

#description
{
    border:1px solid #BBBBBB;
    width:200px; 
    word-wrap: break-word; //Add this
}

Alternatively, You can also use

overflow-wrap:break-word;

From the specification, http://www.w3.org/TR/css3-text/#overflow-wrap, ‘word-wrap’ as an alternate name for the ‘overflow-wrap’

edited Sep 12 '13 at 13:41

answered Sep 12 '13 at 13:34

Venkata Krishna

14,926
5
42
56

score 0 · Answer 4 · answered Sep 12 '13 at 13:38

If you're looking for the content to be on one line still, you can use something similar to this to get that:

#description
{
    border:1px solid #BBBBBB;
    width:200px;
    overflow:hidden; //add this
    text-overflow:ellipsis;  //and this
}

If you're not worried about it going onto a new line, one of the other answers will help you :)

How to align DIV contains String with no Spaces

4 Answers4