How can i put text into the next line if content exceeds the fixed width for html div

Question

I have a div, which consists of words with different styles applied to text segments.

I am trying to implement a layout such that if the text exceeds the width of the div, it should go over to the next line. Basically: No word break Also, the key here is to make sure that a word never breaks, if the whole word can't fit inside the div horizontally, it should move over to the next line.

We can assume that the width is atleast more than the width of the longest word.

http://jsfiddle.net/cH5tN/15/

When you say "no word break" you mean no breaking in the middle of a word, right? That's how a `
` behaves by default so long as you've specified a `width` for it. — KRyan, Sep 24 '12 at 20:21
You're not dealing - in your fiddle - with "words" or brute text but with a bunch of `span` elements each containing part of a word. That's quite different from a CSS point of view I believe — FelipeAls, Sep 24 '12 at 20:23
@FelipeAls yes, it is a collection of spans.. Basically a word is split across multiple spans , which is used for applying different styles within a word — sbr, Sep 24 '12 at 20:25
@KRyan . by "no word break" I mean to say that there shouldn't be any break at any point in the word. If it fits completely then fine, else move the word to the next line. — sbr, Sep 24 '12 at 20:27
The nbsp (non blocking space char ) is the delimiter to identify 'word' — sbr, Sep 24 '12 at 20:32
possible duplicate of [
when text exceeds width, continue in new line](http://stackoverflow.com/questions/13790170/p-when-text-exceeds-width-continue-in-new-line) — bummi, Jul 06 '15 at 07:23

hobberwickey · Accepted Answer · 2012-09-24T20:47:21.883

2

You should do two things. Use the css property 'white-space: no wrap' and nest the stylized letters within a single span. Here's the updated fiddle http://jsfiddle.net/cH5tN/44/

EDIT:

Also, you should avoid non-breaking spaces, just use a space unless there's a specific reason you wouldn't want the text to break on a particular space.

edited Sep 24 '12 at 20:47

answered Sep 24 '12 at 20:33

hobberwickey

6,118
4
28
29

ChristopheD · Answer 2 · 2012-09-24T20:41:13.773

I'd wrap 'words' in a seperate div and just style that. Since you are probably already splitting words into characters (of different sizes) server-side it's supposedly easy to put a small div wrapper around a 'word' ?

Something along these lines: (http://jsfiddle.net/SS8rV/):

<style type="text/css">
.word
{
    float: left;
    height: 64px;
}
#box
{
    width:390px;
    height:390px;
    border:1px solid #F00;
    position:absolute;
    top:0px;
    left:0px;
}
</style>

<div id='box'>
    <div class='word'>
        <span style="font-size:64px;">L</span>
        <span style="font-size:16px;">ONGESTWOR</span>
        <span style="font-size:42px;">D</span>
    </div>
    <div class='word'>
        <span style="font-size:36px;">&nbsp;</span>
    </div>
    <div class='word'>
        <span style="font-size:24px;">regular&nbsp;</span>
    </div>
    <div class='word'>
        <span style="font-size:48px;">w</span>
        <span style="font-size:96px;">id</span>
        <span style="font-size:72px;">est</span>
    </div>
</div>

score 0 · Answer 3 · answered Sep 24 '12 at 20:28

Words will automatically go to the next line if it doesn't fit in a div, but because you have broken the words up in individual letters, is why the letters won't stick together as a word. If you want the letters stick together I would just use a <br /> if it doesn't stay on the same line. It's sloppy, but you have broken the letters up anyway.

score 0 · Answer 4 · answered Sep 24 '12 at 20:31

What do you mean by "word"? As KRyan said, that is the default behavior of a div with specified width. the html does not know, off course, the lexical aspects of what do you understand under word, that's silly. Just wrap your collection of spans that constitute a word (that's all about you to decide) into another divs (or spans).

score 0 · Answer 5 · edited Jul 06 '15 at 08:26

0

This may help you :

 .message{
         white-space: -moz-pre-wrap !important;
         white-space: -pre-wrap;
         white-space: -o-pre-wrap;
         white-space: pre-wrap;
         word-wrap: break-word;
         word-break: break-all;
         white-space: normal;
    }

edited Jul 06 '15 at 08:26

Khalid

4,730
5
27
50

answered Jul 06 '15 at 07:11

baby maneesha Sunkara

89
1
1

How can i put text into the next line if content exceeds the fixed width for html div

5 Answers5