How do I wrap text in a span?

Question

I've got a span that's 350 pixels wide. If there's more text than that, it just goes straight out to the right off to the side of the span. How do I force the text to wrap down into a paragraph? I've tried a variety of things which I've found on the web, and nothing seems to work.

This needs to work for IE 6 onward. It would be good if it worked in Firefox, too.

UPDATE:

Here's a little more info. I'm trying to implement a tooltip. Here's my code:

HTML

<td style="text-align:left;" nowrap="nowrap" class="t-last">
    <a class="htooltip" href="#">
        Notes<span style="top: 40px; left: 1167px; ">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</li>
            </ul>
        </span>
    </a>
</td>

CSS

.htooltip, .htooltip:visited, .tooltip:active
{
    color: #0077AA;
    text-decoration: none;
}

.htooltip:hover
{
    color: #0099CC;
}

.htooltip span
{
    display: inline-block;

    /*-ms-word-wrap: normal;*/
    word-wrap: break-word;

    background-color: black;
    color: #fff;
    padding: 5px 10px 5px 40px;
    position: absolute;
    text-decoration: none;
    visibility: hidden;
    width: 350px;
    z-index: 10;
}

.htooltip:hover span
{
    position: absolute;
    visibility: visible;
}

Ledbetter

Span is an inline element. In general it is not correct to impose width restrictions on such objects. Use <p> or <div> and setup CSS. – Quade

Did you set the white-space property in the span? – Glogau

white-space is one thing I tried. – Ledbetter

Putting a <p> inside the span and setting its width doesn't seem to make the text wrap, either. – Ledbetter

@birdus, that might be because p's can't [legally] go in span's. Even if the reason you asked the question is long gone, can you look at my answer (just click the fiddle link) and see that it works, and if it doesn't, comment on it for me? – Doxology

Answer 1

Wrapping can be done in various ways. I'll mention 2 of them:

1.) text wrapping - using white-space property http://www.w3schools.com/cssref/pr_text_white-space.asp

2.) word wrapping - using word-wrap property http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

By the way, in order to work using these 2 approaches, I believe you need to set the "display" property to block of the corresponding span element.

However, as Kirill already mentioned, it's a good idea to think about it for a moment. You're talking about forcing the text into a paragraph. PARAGRAPH. That should ring some bells in your head, shouldn't it? ;)

Scion

As I said above, putting the text inside a <p> and that inside the span, it still didn't wrap. I also already tried the white-space and word-wrap properties and it didn't wrap. – Ledbetter

@birdus, check your devtools in your browser to see corresponding css rules that are interfering with your settings, because it WORKS by default. Just verified it to be 1000000% sure nothing has changed since last checked. Don't put p inside a span, it doesn't make any sense. Use simple paragraph instead. Don't know why you have the urge to stick it inside a span. If it still doesn't work, I'm afraid you'd need to provide your actual code + live example, so we can check it. – Scion

The span wasn't my urge. Just found it online while looking for some code for tooltips. – Ledbetter

I voted this up because the 'however' smacked me upside the head and made me realize what I was doing was stupid. :-) – Empery

As for me, white-space property is a solution .wrap{ white-space: normal; } (I have parent fixed width div and child with long text to be wrap and multiline if needed) – Flivver

Answer 2

You should use white-space with display table

Example:
    legend {
        display:table; /* Enable line-wrapping in IE8+ */
        white-space:normal; /* Enable line-wrapping in old versions of some other browsers */
    }

Noble

Answer 3

Try

.test {
white-space:pre-wrap;
}

<a class="test" href="#">
    Notes

    <span>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
    </span>
</a>

Walkin

Answer 4

I've got a solution that should work in IE6 (and definitely works in 7+ & FireFox/Chrome).
You were on the right track using a span, but the use of a ul was wrong and the css wasn't right.

Try this

<a class="htooltip" href="#">
    Notes

    <span>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
    </span>
</a>

.htooltip, .htooltip:visited, .tooltip:active {
    color: #0077AA;
    text-decoration: none;
}

.htooltip:hover {
    color: #0099CC;
}

.htooltip span {
    display : none;
    position: absolute;
    background-color: black;
    color: #fff;
    padding: 5px 10px 5px 40px;
    text-decoration: none;
    width: 350px;
    z-index: 10;
}

.htooltip:hover span {
    display: block;
}

Everyone was going about this the wrong way. The code isn't valid, ul's cant go in a's, p's can't go in a's, div's cant go in a's, just use a span (remembering to make it display as a block so it will wrap as if it were a div/p etc).

Doxology

Answer 5

If it's a big word without space you can use overflow-wrap: break-word;

.text {
  overflow-wrap: break-word;
}

<span class='text'>
Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.
</span>

Parole

Answer 6

Try putting your text in another div inside your span:

i.e.

<span><div>some text</div></span>

Glogau

That didn't work, either. All this makes me wonder if I have something weird preventing all these things from doing what they're supposed to do. – Ledbetter

check your css...also the html make sure you don't have any missing tags – Glogau

div inside a span is not valid html (w3.org/TR/REC-html40/struct/global.html#h-7.5.4) – Kachine

This is invalid code, you should not put a block element as a child of an inline element. – Backtrack