Solution aux ellipses dans les parties CSS au-delà de 2 lignes-tutoriel CSS-php.cn

Solution aux ellipses dans les parties CSS au-delà de 2 lignes

高洛峰

Libérer： 2017-03-16 09:56:20

original

2504 Les gens l'ont consulté

J'ai rencontré ce problème alors que je travaillais sur quelque chose aujourd'hui, je l'ai résumé sur Baidu et j'ai obtenu ce résultat.

Tout d'abord, vous devez connaître les trois attributs du CSS .

overflow:hidden; //Le texte en excès est masqué

text-overflow:ellipsis; //Le débordement est affiché avec des points de suspension

white-space:nowrap; //Pas de retour à la ligne en cas de débordement

Ces trois sont les propriétés de base du CSS et doivent être mémorisées.

Mais le troisième attribut ne peut afficher qu'une seule ligne et ne peut pas être utilisé ici. Et si plusieurs lignes sont affichées ?

css3 résout ce problème. La solution est la suivante :

display:-webkit-box; //Remplacer objectAffiché sous la forme d'un modèle de boîte évolutif et flexible.

-webkit-box-orient:vertical; //Disposer les éléments enfants verticalement de haut en bas (définir la disposition des éléments enfants de la boîte rétractable)

-webkit-line-clamp : 2; //Cet attribut n'est pas un attribut standard de CSS. Il doit combiner les deux attributs ci-dessus pour indiquer le nombre de lignes affichées.

Le style CSS final est le suivant :

overflow:hidden

text-overflow:ellipsis;

affichage : -webkit -box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2

S'il s'agit d'un deux ou trois lignes; -line conteneur, pensez qu'il n'y a aucun moyen d'implémenter cette méthode en utilisant uniquement du CSS.

peut fournir deux méthodes, l'une consiste à utiliser le programme pour tronquer les mots lors de la sortie, l'autre consiste à utiliser js pour juger du nombre de mots et tronquer.

La démo de JS est la suivante :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 
<title>Examples</title>
<style type="text/css">
.demo{width:100px;}
</style>
</head>
<body>
<div class="demo" id="demo">怎么显示两行或三行文字，然后多出的部分省略号代替?</div>
<script>
// js无法直接通过class获取对象，必须自己写一个方法,这样效率会非常低，原生js里最好用id获取，
// 直接用id获取domo对象
var oBox=document.getElementById(&#39;demo&#39;);
// slice() 方法可从已有的数组中返回选定的元素。
// 您可使用负值从数组的尾部选取元素。
// 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
// 此处需要根据需求自行修改slice()的值，以达到要显示的内容
var demoHtml = oBox.innerHTML.slice(0,10)+&#39;...&#39;;
// 填充至指定位置
oBox.innerHTML = demoHtml;
</script>
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!