首页 > 其他分享 >CSS多行文本溢出显示省略号

CSS多行文本溢出显示省略号

时间:2023-11-24 19:56:17浏览次数:32  
标签:多行 box 省略号 clamp webkit overflow 文本 CSS

## WebKit内核浏览器解决办法

  • display: -webkit-box 将对象作为弹性伸缩盒子模型显示;
  • -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式;
  • text-overflow: ellipsis 用省略号“…”隐藏超出范围的文本。
  • -webkit-line-clamp是用来限制在一个块元素显示的文本的行数 ,
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

 

标签:多行,box,省略号,clamp,webkit,overflow,文本,CSS
From: https://www.cnblogs.com/xianlling/p/17854631.html

相关文章

  • css 发光文字
    .textBox{font-family:"MicrosoftYaHei";font-size:28px;font-weight:bold;white-space:nowrap;line-height:40px;background:linear-gradient(30deg,rgba(255,255,2......
  • HTML+CSS+Javascript+Vue
    TableofContentsI.HTMLII.CSSGetStartedI.HTML按tab自动生成LabelMeaningPropertiesdiv块状元素span行间元素h1-h6标题iicon图标strong字体加粗a超链接img插入图片video插入视频controlsinput表单(输入账号、......
  • CSS杂记
    .bigClass{  margin:200pxauto;保证金:200px自动;  width:500px;宽度:500px;  height:500px;高度:500px;  background-color:yellow;背景颜色:黄色;  display:flex;显示:柔体;  /*控制子容器位置*/  align-items:center;align......
  • css 水平垂直居中的几种方法
    水平垂直居中的几种方式记录一下容器内只有单一元素时居中的几种方式<divstyle="width:300px;height:300px"class="wrap"><divstyle="width:100px;height:100px"class="box"></div></div>1.容器flex,调整内部轴线.wrap{di......
  • CSS 尺寸单位概述
    在本文中,我们将探讨CSS尺寸单位的四大类别。我们将了解这些尺寸单位的用途、它们的最佳工作原理,以及如何在每种情况下选择最佳尺寸单位,从而在各种媒体和设备尺寸下优化我们的布局。关于CSS尺寸单位CSS提供了多种指定元素大小或长度的方式,其中一些更为直观。CSS单位可分......
  • Tailwind CSS 解决了什么问题?
    从页面样式设计的颗粒度Granularity来谈起元素颗粒度我们知道,构成网页页面元素的最底层,最原始的东西就是HTML&CSS为每一个元素指定不同的内联inline-style或者class来控制它的呈现方式,最细程度可以到元素的style属性来控制,颗粒度停留在元素<!DOCTYPEhtml><htmll......
  • 纯CSS实现炫酷文本阴影效果
    如图所示,这是一个文本阴影效果,阴影有多个颜色,鼠标悬停时文本阴影效果消失,文本回到正常的效果。让我们逐步分解代码,看看如何使用纯CSS实现这个效果的。基于以上动图可以分析出以下是本次实现的主要几个功能点:文本有多个颜色的阴影的效果文本有空心镂空的效果鼠标悬停时文本回......
  • CSS选择器
    CSS选择器是用来选择需要改变样式的HTML元素的模式。到CSS3为止,支持的选择器类型有6种,包括标签选择器、派生选择器(上下文选择器)、id选择器、class选择器、属性选择器和通配符*选择器。以下是这六种选择器的简要介绍:标签选择器:通过HTML元素的标签名来选择元素。派生选择器(上下文选择......
  • Vue动态改变css样式的3种方法
    在网页开发中,我们经常会遇到动态的改变某个元素样式的需求,在vue里如何实现呢?官网上其实写的很详细了,对象语法,数组语法等。我自己总结了在开发中,个人用的比较多的三种方式1.class,三元表达式:class="[occupation==='请选择'?'lh60':'lh61']"css.red{color:red;}.blue......
  • 纯CSS动态渐变文本特效
    如图所示,这是一个炫酷的文本渐变效果,如同冰岛的极光一般。本次的文章让我们逐步分解代码,了解其实现原理。基于以上动图效果可以分析以下是本次动效实现的主要几点:文本中有多个颜色的动画每个颜色显示的半径不同,有大有小整体动画是有规律的重复进行着实现过程接下来开始正......