首页 > 其他分享 >css超出隐藏、显示省略号

css超出隐藏、显示省略号

时间:2023-08-02 17:12:38浏览次数:31  
标签:box 省略号 超出 webkit overflow 隐藏 css

 

超出一行隐藏:

overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行

 _____________________________________________________________________________________________________________________________

超出两行隐藏:

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)

-webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。

 _____________________________________________________________________________________________________________________________

超出两行显示

overflow:hidden; 

text-overflow:ellipsis;

display:-webkit-box; 

-webkit-box-orient:vertical;

-webkit-line-clamp:2; 

 

标签:box,省略号,超出,webkit,overflow,隐藏,css
From: https://www.cnblogs.com/fenfen201510/p/17601196.html

相关文章

  • Android App 隐藏标题栏+状态栏+导航栏
    1.隐藏当前Activity标题栏在当前Activity中调用:this.requestWindowFeature(Window.FEATURE_NO_TITLE);2.隐藏当前Activity状态栏(StatusBar)2.1Android4.0andLowerpublicclassMainActivityextendsActivity{@OverrideprotectedvoidonCreate(Bundle......
  • vue 通过css 给html元素增加前缀红色星号
    <el-form-item>前面增加红色星号要为<el-form-item>的label增加红色星号,你可以使用CSS中的伪元素::after或::before来实现。下面是如何在样式中添加红色星号的示例:<el-form-itemclass="red-label"label="物流商信息"></el-form-item><stylescopedlang="scss"......
  • 微信小程序:隐藏按钮边框
    1、先给button加一个plain属性<buttonwx:elif="{{isLogin}}"type="default"plainclass="userinfo-avatar"open-type="chooseAvatar"bind:chooseavatar="onChooseAvatar"><imagesrc="{{ava......
  • css 中强制换行后,伪类元素变形,用到的flex-shrink 属性
    之前都没用过这个属性,最近做项目遇到一个不同屏幕下可能会换行的问题,设置了强制不换行,但是伪类元素就没挤没了,请教了同事,用到了flex-shrink属性然后我就去看了看这个属性的用法,简单记录一下flex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时......
  • css伪类选择器大全
    伪类选择器css伪类选择器大全:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes伪类含义:link选中未访问过的超链接:visited选中已访问过的超链接:hover选中鼠标移入的元素:active选中鼠标按下的元素:focus选中聚焦的表单元素:......
  • CSS中 no-repeat作用
    针对背景图。当你设置了no-repeat,背景图将不会被重复,不会出现平铺或重复的现象。还可以修改图片的位置,例如:{backgroud:top,center,no-repeat;}背景图位于上部的居中位置。如:.sortedDESC{      background:url(/img/icon-table-sort-desc.png)no-repeat80%11p......
  • css transform 作用
    用于元素的2D或3D转换。这个属性允许你将元素旋转【rotate】,缩放【scale】,移动【translate】,倾斜【skew】等如:旋转transform兼容浏览器需要添加前缀{ transform:translate(10,10)//W3c标准 -webkit-transform:translate(10,10)//SafariChrome -moz-transform:translate(10,......
  • 如何隐藏开源流媒体EasyPlayer.js视频H.265播放器的实时录像按钮?
    目前我们TSINGSEE青犀视频所有的视频监控平台,集成的都是EasyPlayer.js版播放器,它属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,包括WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等,支持全平台、全终端播放,如Windows、Linux、Android、iOS,支持H.264与H.265编码......
  • 如何隐藏开源流媒体EasyPlayer.js视频H.265播放器的实时录像按钮?
    目前我们TSINGSEE青犀视频所有的视频监控平台,集成的都是EasyPlayer.js版播放器,它属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,包括WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等,支持全平台、全终端播放,如Windows、Linux、Android、iOS,支持H.264与H.265编码,......
  • css的inline-block布局方式对齐问题 —— 转载自 article/2023/7/31 16:26:21
    css的inline-block布局方式对齐问题今天在实现百度前端技术学院的如下案例时遇到了div上下对齐问题。针对如下左右两栏布局,本来使用将两栏各自div的display设置为inline-block方式来实现,为了左边高度与右边对齐,直接量出右边div按照像素高度赋给左边。但是左边元素竟然出现在了......