html - emplea - atributo title de la imagen

¿Cómo se ajusta el texto en un lapso?

Question

Tengo un lapso de 350 píxeles de ancho. Si hay más texto que eso, simplemente sale directamente a la derecha hacia el lado del tramo. ¿Cómo fuerzo el texto para que se reduzca en un párrafo? He intentado una variedad de cosas que he encontrado en la web, y nada parece funcionar.

Esto debe funcionar para IE 6 en adelante. Sería bueno si también funcionara en Firefox.

ACTUALIZAR:

Aquí hay un poco más de información. Estoy tratando de implementar una información sobre herramientas. Aquí está mi código:

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

Answer 1

Debes usar espacios en blanco con tabla de visualización

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

Answer 2

Envoltura se puede hacer de varias maneras. Mencionaré 2 de ellos:

1.) ajuste de texto - usando la propiedad de espacio en blanco http://www.w3schools.com/cssref/pr_text_white-space.asp

2.) ajuste de palabras - usando la propiedad de ajuste de palabras http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

Por cierto, para poder trabajar con estos 2 enfoques, creo que es necesario configurar la propiedad "pantalla" para bloquear el elemento de intervalo correspondiente.

Sin embargo , como ya mencionó Kirill, es una buena idea pensar en ello por un momento. Estás hablando de forzar el texto en un párrafo. PÁRRAFO. Eso debería sonar algunas campanas en tu cabeza, ¿no es así? ;)

Answer 3

Intenta poner tu texto en otro div dentro de tu span:

es decir

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

Answer 4

Tengo una solución que debería funcionar en IE6 (y definitivamente funciona en 7+ y FireFox / Chrome).
Estabas en el camino correcto usando un span , pero el uso de una ul estaba mal y el css no estaba bien.

Prueba esto

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

Todo el mundo estaba haciendo esto por el camino equivocado. El código no es válido, ul no puede ir en a ''s, p '' s no puede ir en a ''s, div '' s no puede ir en a ''s, simplemente use un span (recordando para que display como un block por lo que se envolverá como si fuera un div / p etc.).