Как обернуть текст в промежутке?

У меня есть полоса шириной 350 пикселей. Если есть больше текста, это просто идет прямо в сторону пролета. Как заставить текст обернуться в абзац? Я пробовал множество вещей, которые я нашел в Интернете, и ничего не работает.

Это необходимо для IE 6. Было бы хорошо, если бы он работал и в Firefox.

UPDATE:

Вот немного больше информации. Я пытаюсь реализовать всплывающую подсказку. Здесь мой код:

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;
}

Ответ 1

Обертка может выполняться различными способами. Я упомянул 2 из них:

1.) text wrapping - использование свойства white-space http://www.w3schools.com/cssref/pr_text_white-space.asp

2.) перенос слов - с использованием свойства word-wrap http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

Кстати, для того, чтобы работать с использованием этих двух подходов, я считаю, что вам нужно установить свойство display для блокировки соответствующего элемента span.

Однако, как уже упоминал Кирилл, неплохо подумать об этом на мгновение. Вы говорите о принуждении текста к абзацу. ПАРАГРАФ. Это должно вызвать некоторые колокольчики в голове, не так ли?;)

Ответ 2

Вы должны использовать белое пространство с таблицей отображения

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

Ответ 3

У меня есть решение, которое должно работать в IE6 (и, безусловно, работает в 7+ и FireFox/Chrome).
Вы были на правильном пути с помощью span, но использование ul было неправильным, и css был неправильным.

Попробуйте это

<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;
}

Все происходили неправильно. Код недействителен, ul не удается войти в a, p не может войти в a, div не использовать a, просто используйте span (не забудьте сделать его display как block, чтобы он обернулся, как если бы он был div/p и т.д.).

Ответ 4

Попробуйте помещать текст в другой div внутри вашего диапазона:

то есть.

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