web-dev-qa-db-fra.com

Utilisation du dépassement de texte CSS pour faire varier le nombre de lignes de texte dans un élément d'une hauteur définie

Je suis profondément impliqué dans le développement d'applications web pour iPhone (Safari/WebKit) et je souhaite disposer d'éléments d'une hauteur définie avec le texte du titre et le corps du texte de sorte que 3 lignes soient toujours affichées. Si le texte du titre est court, 2 lignes de corps de texte doivent apparaître. Si le texte du titre est très long, il devrait occuper un maximum de 2 lignes et laisser 1 ligne pour le corps du texte. Chaque fois que le texte est tronqué, il doit afficher un Ellipsis comme dernier caractère.

Je suis venu avec ce qui suit qui fait tout ce dont j'ai besoin, sauf qu'il n'affiche pas les Ellipsis. Existe-t-il un moyen de faire en sorte que cette solution réponde à cette dernière exigence?

Code ci-dessous, tel que rendu par Safari http://segdeha.com/assets/imgs/stack-Ellipsis.png

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">

        #container {
            width: 100px;
        }

        p {
/*          white-space: nowrap; */
            font-family: Helvetica;
            font-size: 12px;
            line-height: 16px;
            text-overflow: Ellipsis;
            max-height: 48px;
            overflow: hidden;

            border: solid 1px red;
        }

        strong {
/*          white-space: nowrap; */
            font-size: 16px;
            display: block;
            text-overflow: Ellipsis;
            max-height: 32px;
            overflow: hidden;
        }

        </style>
    </head>
    <body>
        <div id="container">
            <p>
                <strong>Short title</strong>
                This is the text description of the item. 
                It can flow onto more than 2 lines, too, 
                if there is room for it, but otherwise 
                should only show 1 line.
            </p>
            <p>
                <strong>Long title that will span more 
                than 2 lines when we're done.</strong>
                This is the text description of the item. 
                It can flow onto more than 2 lines, too, 
                if there is room for it, but otherwise 
                should only show 1 line.
            </p>
        </div>
    </body>
</html>
csscss3
23
Andrew Hedges

Une solution à ce problème consiste à supprimer le texte en fondu plutôt qu’à ajouter un Ellipsis. S'il s'agit d'une alternative acceptable pour vous, veuillez lire la suite.

Étant donné que la hauteur de ligne est fixée à 16 pixels, vous pouvez utiliser une simple image png avec un dégradé (ou utiliser un dégradé CSS3) qui passe de la transparence à la couleur d'arrière-plan correspondante et la positionne dans le coin inférieur droit du paragraphe.

La même chose fonctionnera pour le titre si vous positionnez l’image dégradée à 16 pixels du haut de sorte qu’elle ne soit visible que si le titre atteint deux lignes (grâce au débordement masqué).

9
Magnus Magnusson

Vous pouvez spécifier la taille de la police à utiliser dans ce champ (font-size), puis corriger les height et width du champ (car vous savez maintenant combien de lignes de font-size size peuvent contenir), puis utilisez la propriété overflow (pas text-overflow).

3
Eugene

Essayez celui-ci: jsfiddle.net/7BXtr/ . Il n’utilise que les CSS (pas de JavaScript).

overflow: hidden est appliqué dans le texte et ... est placé après celui-ci.

Inconvénients:

  • Une ellipse apparaîtra toujours après la description, même si elle est courte.
  • Les ellipses apparaissent toujours aux mêmes positions à droite.
1
uınbɐɥs

Je sais que c'est trop tard d'une réponse. Mais pour les autres à la recherche du même problème: Je développe sur la réponse de Magnus Magnusson.

Pour créer une teinte translucide, vous pouvez utiliser la propriété box-shadow qui peut être utilisée pour créer un effet de teinte intérieure.

0
UKM