Concernant les ellipses qui apparaissent lorsque le texte CSS multiligne déborde

Cet article présente principalement des informations pertinentes sur des exemples d'ellipses apparaissant lorsque du texte CSS multiligne déborde. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Des élipses apparaissent lorsque du texte multiligne déborde

Cet article recommande 2 méthodes.

1. css

astuce : uniquement compatible avec les navigateurs avec noyau chrome. ff n'est pas pris en charge.

.box {
    overflow: hidden; /* 溢出时不显示溢出的内容 */
    text-overflow: ellipsis; /* 发生溢出时使用省略号代替 */
    display: -webkit-box; /* chrome浏览器的私有属性。显示为box。 */
    -webkit-box-orient: vertical; /* 垂直排列元素 */
    -webkit-line-clamp: 2; /* 显示多少行 */
}

Extension

retour à la ligne

关键字	描述	默认值	值
word-wrap	规定单词换行的条件	normal, 在单词断字点处换行。	break-word，在单词内换行。
overflow-wrap,在css3时由word-wrap改为overflow-wrap

débordement de texte

关键字	描述	默认值	值
test-overflow	超出盒子的文本如何显示		clip, 修剪文本。 ellipsis, 显示省略号。 string, 显示指定的文本。

white-space

关键字	描述	默认值	值
white-space	对待空白的方法和是否换行	normal，空白会被浏览器忽略。	pre, 保留空白。nowrap, 文本不换行。pre-wrap, 保留空白，正常换行。pre-line，合并空白，保留换行。

box-orient

Cet attribut n'est pas encore pris en charge par les navigateurs. Vous devez utiliser les propriétés privées des navigateurs respectifs.

关键字	描述	默认值	值
box-orient	子元素如何排序	inline-axis，子元素沿着内联坐标轴（映射到横向）。	horizontal, 指定子元素在一个水平线上从左到右排列。vertical, 从顶部向底部垂直排列子元素。block-axis, 子元素沿着块坐标轴（映射到垂直）。inherit，继承父元素。

line-clamp

Seuls les navigateurs dotés de Chrome Core prennent en charge leurs propres propriétés privées.

Combien de lignes d'éléments au niveau du bloc doivent être affichées.

2. js

Il existe de nombreuses façons d'utiliser js pour contrôler l'affichage du texte de débordement. Voici un fichier de script recommandé : ellipsis.js

ellipsis.js

名称	链接
ellipsis 链接	https://www.jsdelivr.com/package/npm/ellipsis.js
ellipsis	https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js
ellipsis git	https://github.com/glinford/ellipsis.js

Comment l'utiliser.

1. Importez le fichier de script

<script src="https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js"></script>

2. >

var ell = Ellipsis({
    lines: 3
})
var ele = document.getElementsByClassName('test')
ell.add(ele)

Extension

Il comporte également quelques éléments de configuration. Si elle n'est pas configurée, la valeur par défaut est utilisée.

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

{
    ellipsis: '...', // 默认显示的替代文本
    debounce: 0, // 延迟多长时间后执行
    responsive: true, // 是否有窗口大小改变时执行
    className: '.clamp', // 默认操作具有这个类的元素。
    lines: 2, // 默认只出现2行元素。
    portrait: null, // 默认不改变，如果你想要在竖屏模式下有不同的行数，
    break_word: true // 默认截断单词。
}

Recommandations associées :

À propos de l'utilisation du signe supérieur à dans les styles CSS et les méthodes d'héritage en CSS

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!