首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS控制文字,超出部分显示省略号

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。...但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号,如下。...给p::after添加渐变背景可避免文字只显示一半。...CSS设置一行文字,超出部分自动隐藏 1 2 3 4 5 6 7 8 9 .textone {         overflow: hidden;         text-overflow: ellipsis...这样就可以定义超过一行自动隐藏的效果了;设置超过两行自动隐藏是效果,line-height和max-heinght成比例,-webkit-line-clamp设为2,这样就可以实现超过两行自动隐藏多余部分的效果了

    3.3K20

    css控制标题长度超出部分显示省略号

    ------------------------------------- 语法:   text-overflow : clip | ellipsis   参数:        clip : 不显示省略标记...,而是简单的裁切        ellipsis : 当对象内文本溢出时显示省略标记(...)    text-overflow属性仅是注解,当文本溢出时是否显示省略标记。...还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。   ...并且 clip 属性设置将失效  auto :  在必需时对象内容才会被裁切或显示滚动条  hidden :  不显示超过对象尺寸的内容  scroll :  总是显示滚动条  一、仅定义text-overflow...; 同样不能实现省略号效果    三、同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果

    1.6K120

    用css实现文本溢出 超出部分隐藏显示省略号

    插件更好的实现文本溢出隐藏效果,可以访问:jQuery.dotdotdot多行文本省略号插件的使用方法 在CSS3中可以使用 text-overflow 对文本溢出进行处理: clip :(默认值),文本溢出部分裁切...ellipsis  : 溢出显示 ... tip : 设置 ellipsis 时需将给元素设置 overflow: hidden; 和 white-space: nowrap; ,仅限于单行文本溢出。...text-overflow: ellipsis;         white-space:nowrap; } WebKit内核的浏览器可以设置 -webkit-line-clamp: number; 实现在第几行末尾显示省略号...webkit-box-orient: vertical;         /*内容之间的排列顺序,vertical垂直方向排列*/         -webkit-line-clamp: 3;         /*在第几行末尾显示省略号...display: -webkit-box; 将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 vertical 是代表垂直排列。

    3.2K00

    css限制文字显示字数长度,超出部分自动用省略号显示,防止溢出到第二行

    效果如下: 未限制显示长度,如果超出了会溢出到第二行里。严重影响用户体验和显示效果。 我们在列表样式里添加css,如下图。...修改后效果: 农牧养殖设备 ---- 正文开始 (1).文字超出一行,省略超出部分显示'...' 如果这种情况比较多,可以取一个切合作用的类名用于复用。...line-limit-length { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //文本不换行,这样超出一行的部分被截取...,显示... } 最新消息:神秘地球黑洞深不可测,不停吸入周围海水。...可以给定容器宽度限制,超出部分省略 .product-buyer-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis

    3.8K00
    领券