affichage contenu HTML lignes limitées

Comment afficher les éléments d'information qui vient de la base de données sur une page Web limitant le nombre de lignes à 3.affichage contenu HTML lignes limitées

Le contenu des nouvelles est au format html par exemple

<p><span style="font-family: HelveticaNeue LT 77 BdCn;"><span style="font-size: large;">The average house price&amp;nbsp;up by 0.3% in May</span></span></p> 
<p><span style="font-family: HelveticaNeue LT 55 Roman;"><span style="font-size: small;">compared to the previous month <br />but fell 1.2% compared to May 2010</span></span></p> 
<p><span style="font-family: HelveticaNeue LT 55 Roman;"><span style="font-size: small;"></span></span><span style="font-family: HelveticaNeue LT 55 Roman;"><span style="font-size: small;"><a href="http://www.nationwide.co.uk/hpi/historical/May_2011.pdf" title="Nationwide House Price Index">Nationwide House Price Index</a></span></span></p>

Comment puis-je afficher les trois premières lignes seulement à partir des nouvelles html ci-dessus en utilisant le script java/css et ajouter ... à la fin.

J'ai essayé en réglant la hauteur et le débordement sur l'élément div qui enveloppe le contenu des nouvelles ci-dessus, mais qui va recadrer la ligne du bas du texte en fonction de la police ou du navigateur.

Source

2011-09-28 Jemsworld

Je pense que la façon la plus fiable pour le faire serait de définir la propriété line-height (à tout ce qui vous semble la meilleure), puis en définissant la propriété height à 3 fois la valeur utilisée pour la propriété line-height. Ensuite, il suffit d'utiliser la propriété overflow en conséquence, comme vous l'avez dit.

Par exemple:

.newsItems { 
    line-height: 1.2em; 
    height: 3.6em; 
    overflow: hidden; 
}

Source

2011-09-28 20:42:40

Je suggère que vous utilisiez des valeurs relatives aux polices pour cela (par exemple: 'line-height: 1.2em; height: 3.6em;'). Maintenant, si vous changez la taille de police (ou si l'utilisateur remplace vos choix de police), cela fonctionnera toujours comme vous le souhaitez. – Lee

Je n'ai aucun contrôle sur le contenu des nouvelles car l'utilisateur peut utiliser n'importe quelle police ou taille ou gras etc. – Jemsworld

Si le tout est une police et taille de police (que l'utilisateur peut sélectionner), alors utiliser 'em' devrait fonctionner. J'ai mis à jour mon exemple pour refléter cela, car la suggestion de @ Lee est probablement plus correcte en général. Si l'utilisateur peut changer la police et la taille de la police à n'importe quel point au milieu de la phrase, alors obtenir exactement trois lignes sera difficile (je pense impossible) à réaliser en utilisant du CSS pur. –

Si vous connaissez la hauteur de la police, vous pouvez définir la hauteur de la div appropriée. La réponse simple est de définir la hauteur à 3em, bien que vous aurez probablement besoin de quelques ajustements.

Source

2011-09-28 20:42:54

affichage contenu HTML lignes limitées

Répondre

Questions connexes