多行文字最后一行显示省略号

最新推荐文章于 2019-10-11 13:49:02 发布
最新推荐文章于 2019-10-11 13:49:02 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： css 多行最后一行显示省略号

转载： http://www.css88.com/webkit/-webkit-line-clamp/
-webkit-line-clamp 是一个 不规范的属性，它没有出现在 CSS 规范草案中。（ie和火狐不兼容）

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        p {
            width: 150px;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }
    </style>
</head>

<body>
    <p>
        111111111111111111111111111111111111111111111111
        111111111111111111111111111111111111111111111111
    </p>
</body>
</html>

运行结果：
这里写图片描述

街边吃垃圾
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
多行文本末尾溢出文字显示省略号问题
FengziTianYu的专栏
04-19 605
问题 我之前作为开发者、亦或者作为一个先行者，都被问过很多次一个问题：“多行文本末尾的溢出怎么搞定？”。 说实话我对css理解的的确一般，但是对我个人而言我第一个想到的办法永远都是： { overflow:hidden; text-overflow:ellipsis; white-space：nowrap } 但是这种写法带来的效果是无论你的文本内容又多少，都...
多行文本溢出最后一行显示省略号
lh_guojw的博客
07-06 3480
现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号，但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢？ 1、-webkit-line-clamp  Webkit支持一个名为-webkit-line-clamp的属性，他其实是一个 WebKit-Specific Unsupported Property，也就是说这个
笔记：css能做到文本超出第二行显示省略号
蚁族的奋斗的博客
10-11 359
.ellipsis{ width:100px; overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/ text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/ display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/ ...
微信小程序实现多行文字超出部分省略号显示功能
01-19
用省略号… 来替代，这样显示比较美观好看，显示效果如下 其实实现也是比较简单的 工程中样式文件.wxss内容如下： .productNameText { color: rgb(32, 27, 27); font-size: 35rpx; text-overflow:ellipsis; z-...
微信小程序之canvas 文字断行和省略号显示
03-29
文字的多行处理在dom元素中很好办。但是canvas中没有提供方法，只有通过截取指定字符串来达到目的。 那么下面就介绍我自己处理的办法： wxml： ...canvas肯定要一个画板容器啦...//处理文字多出省略号显示 dealWords: fu
微信小程序实现指定显示行数多余文字去掉用省略号代替
10-18
主要介绍了微信小程序实现指定显示行数多余文字去掉用省略号代替的方法,需要的朋友可以参考下
jQuery文字溢出显示省略号插件特效代码
03-20
jQuery文字溢出显示省略号插件是一款基于dotdotdot.js插件实现的单行多行文本溢出显示省略号
CSS文本超出2行就隐藏并且显示省略号
01-19
//溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ 超出两行隐藏: css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为...
div css 多行文本 最后一行自动显示省略号
qq_15804925的博客
11-30 2309
div{display: -webkit-box;text-overflow: ellipsis;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;} -webkit-line-clamp: 3;这个设置为显示3行，超过3行则最后用省略号代替，目前在移动设备上使
多行文本最后行末尾省略号显示
飞扬_柳絮的专栏
09-18 1194
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xdlines-demo</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style ty
TextView最后一行实现省略号
谷哥的小弟
05-26 2022
main.xml如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layou
Android中TextView限制行数及末尾已省略号显示
热门推荐
Nick备忘录
05-26 3万+
Android中TextView限制行数及末尾已省略号显示 <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hospital_abstract_content" andr
TextView超过了多行，添加省略号
forwardyzk的专栏
05-06 9107
首先
textview在多行情况下如何显示省略号
henry121212的专栏
05-30 9507
package com.baidu.netdisk.ui; import java.util.ArrayList; import java.util.List; import android.content.Context; import android.graphics.Canvas; import android.text.Layout; import androi
多行文本最后一行超出时省略为“....”表示
FroSro的博客
07-04 537
.css { display: -webkit-box; -webkit-line-clamp: 3;//设置多行的行数 -webkit-box-orient: vertical; overflow: hidden; }上面写法适用于以webkit为内核的浏览器以及移动端如果是其他需求则需要其他办法下面是单行"..."的表示.css{ text-overfl...
Android中的TextView实现多行显示省略号
heniyiyang_en的专栏
03-19 696
问题TextView显示内容的时候，多行显示的时候，显示省略号的问题，简便的方法就是在TextView中添加这两个属性的设置即可(显示两行，显示不全的话，用省略号代替) 如：最多显示两行，显示不全时，添加省略号显示。  android:lines="2"            android:ellipsize="end" //动态根据是否出现省略号来显示弹出层  if (Moti
Textview多行时，最后结尾处显示省略号
u014620028的专栏
03-20 7121
Textview多行时，最后结尾处显示省略号
多行文本溢出显示省略号
最新发布
08-19
这段代码将文本内容限制在两行，超过部分将以省略号显示。 请注意，这种效果在某些浏览器和移动设备上可能不支持，因此建议在使用之前进行兼容性测试。<span class="em">1</span><span class="em">2</span><span ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值