web-dev-qa-db-fra.com

Comment encapsuler le texte dans un intervalle?

J'ai une étendue de 350 pixels de large. S'il y a plus de texte que cela, il va tout droit vers la droite sur le côté de la plage. Comment forcer le texte à être enveloppé dans un paragraphe? J'ai essayé une variété de choses que j'ai trouvées sur le Web, et rien ne semble fonctionner.

Cela doit fonctionner pour IE 6 en avant. Ce serait bien si cela fonctionnait aussi dans Firefox.

MISE À JOUR:

Voici un peu plus d'informations. J'essaie d'implémenter une info-bulle. Voici mon 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;
}
htmlcssinternet-explorerword-wrap
24
birdus

L'emballage peut se faire de différentes manières. J'en mentionnerai 2:

1.) habillage de texte - en utilisant la propriété d'espace blanc http://www.w3schools.com/cssref/pr_text_white-space.asp

2.) Habillage de mots - en utilisant la propriété Word-wrap http://webdesignerwall.com/tutorials/Word-wrap-force-text-to-wrap

Soit dit en passant, afin de travailler en utilisant ces 2 approches, je pense que vous devez définir la propriété "display" pour bloquer l'élément span correspondant.

Cependant , comme Kirill l'a déjà mentionné, c'est une bonne idée d'y penser un instant. Vous parlez de forcer le texte dans un paragraphe. PARAGRAPHE. Cela devrait sonner quelques cloches dans votre tête, non? ;)

39
walther

Vous devez utiliser un espace blanc avec une table d'affichage

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

J'ai une solution qui devrait fonctionner dans IE6 (et qui fonctionne certainement dans 7+ et FireFox/Chrome).
Vous étiez sur la bonne voie en utilisant un span, mais l'utilisation d'un ul était incorrecte et le CSS n'était pas correct.

Essayez ceci

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

Tout le monde allait dans ce sens. Le code n'est pas valide, ul ne peut pas entrer a, p ne peut pas entrer _ a, div ne peut pas entrer a, utilisez simplement un span (en vous rappelant de le faire display en tant que block pour qu'il s'emballe comme s'il s'agissait d'un div/p etc).

3
Hashbrown