HTML/CSS: Spécifiez le nombre de lignes à l'intérieur <span>

J'ai un PHP-Webapp et d'une plage, qui ressemble à quelque chose comme ceci:

<span><?= $text ?></span>

Je tiens à vous assurer, que la durée n'a qu'une ligne. Donc, si le texte est trop long, je voudrais ne pas afficher les derniers mots. Puis-je le faire en utilisant le HTML/CSS? Ou dois-je raccourcir le texte avec PHP/Javascript?

Voulez-vous supprimer les mots: ou voulez-vous quelque chose comme overflow:hidden;?
Je n'ai pas de soins. Les mots devraient tout simplement pas apparaître, de sorte que l'ensemble du texte s'inscrit dans une ligne. Je sais que je pourrais supprimer le dernier workds avec PHP /Javascript, mais j'aurais préféré quelque chose de plus simple en HTML/CSS...

OriginalL'auteur Pascal Klein | 2011-01-20

  1. 7

    Comment à ce sujet? (évidemment, vous définissez thewidth à tout ce qu'elle doit être sur la page)

    Le text-overflow: ellipsis est CSS3 et ne seront pris en charge dans les navigateurs modernes, de sorte que dans les anciens, vous obtiendrez un méchant mi-lettre/mot coupé à la fin.

    span{display: block; width: 100px; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis;}
    Au lieu de la hauteur, vous pouvez également utiliser: word-wrap: break-word
    Édité question et a ajouté, merci.

    OriginalL'auteur theorise

  2. 1

    Voici une rude et pas entièrement testé idée:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
p{
    margin: 1em 0;
    padding: 0;
}
span{
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 200px;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
}
--></style>
</head>
<body>

<p>This span (<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>&hellip;) is always 200px width.</p>

</body>
</html>

    Cette preuve de concept ne fait ceci:

    • Rendre la durée d'un élément de niveau bloc de sorte qu'il peut être affecté à une largeur.
    • De la Force de la durée pour les afficher dans une seule ligne (étant donné que la source de la chaîne de ne pas avoir <br> tags).
    • Cacher débordé de contenu.
    • Fixer des marges et de l'alignement afin qu'il reste au même niveau que l'élément parent.

    Améliorations bienvenues.

    OriginalL'auteur Álvaro González

  3. 0

    Voici une fonction qui va le faire:

    function display_one_line($text) {
    $break = strpos($text, "\n");

    if ($break === false) {
        return $text;
    }

    return trim(substr($text, 0, $break));
}

    Utilisation:

    <span><?= display_one_line($text) ?></span>

    mais si vous avez uniquement besoin de le faire une fois, vous pouvez utiliser ce one-liner:

    <span><?= (($break = strpos($text, "\n")) !== false ? substr($text, 0, $break) : $text) ?></span>

    OriginalL'auteur Dominic Barnes