css让文字显示特定行数,多余的显示省略号

/*css*/    

.p{

    width: 200px;

    word-break: break-all;

    text-overflow: ellipsis;

    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/

    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/

    -webkit-line-clamp: 2; /** 显示的行数 **/

    overflow: hidden;  /** 隐藏超出的内容 **/

    }   

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

原文地址:https://www.cnblogs.com/qqfontofweb/p/9040116.html

时间: 2024-10-13 17:32:37

css让文字显示特定行数,多余的显示省略号的相关文章

-webkit-line-clamp 实现限制文字显示多少行,多余的用...

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 限制在一个块元素显示的文本的行数. 为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性: display: -webkit-box; ,将对象作为弹性伸缩盒子模型显示 . -webkit-box-orient  ,设置或检索伸缩盒对象的子元素的排列方式 . text-overflow,可以用来多行文本的情况下,用省略号“...”

-webkit-line-clamp 实现限制文字显示多行,多余的用...

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 限制在一个块元素显示的文本的行数. 为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性: display: -webkit-box; ,将对象作为弹性伸缩盒子模型显示 . -webkit-box-orient  ,设置或检索伸缩盒对象的子元素的排列方式 . text-overflow,可以用来多行文本的情况下,用省略号“...”

Grid++Report设置显示固定行数

原文:Grid++Report设置显示固定行数 一.要实现的功能打印的报表显示固定的行数,并且设置字段的文字可以自动换行二.设置步骤1.鼠标左键单击"明细网格"栏,在右侧属性窗口中设置"追加空白行"属性值为:是:"追加空白行在后"属性值为:是.2.单击"内容行",设置"每页行数"属性值为一整数(比如7,每页固定显示7行,包括标题行):设置"调整行高"属性值为:否:3.单击"某一

linux 查找指定内容并显示指定行数的命令,显示匹配行和行号

grep -i "desktop-printing-0.19-20.2.el5.x86_64" -n -A 10 install.log linux 查找指定内容并显示指定行数的命令,显示匹配行和行号,布布扣,bubuko.com

设置MyEclipse显示代码行数和设置字体的技巧

设置MyEclipse显示代码行数和设置字体的技巧 一个优秀的程序员一定会做到两点,避免bug和瞬间定位bug,显示代码的行数,能帮助我们及时发现错误,分析错误. 1.在MyEclipse菜单栏中找到Window选项,在其下拉菜单中选中Preferences选项,打开 2.在弹出的如下窗口中,在左侧选项列中选General,点击其下拉三角,找到其子选项,Editors 3.在Editors选项中,找到Text Editors选项选中,在右侧中找到Show line numbers,并勾选 4.关

eclipse显示代码行数

最近做的手机APP正在进行最后一部分了,在一个类中估计要写上千行代码,来回的拉动滚动条太麻烦了,于是发现为什么我得eclipse不显示代码行数呢  其他C什么的编译器都显示的. 于是百度了一下,一下子就解决了问题,下面贴一下解决方案 方法1 1 打开eclipse 2 打开你的项目 3 在左侧点击右键,选择“show line numbers” 步骤阅读 4 选择完毕,程序代码的行数已经显示出来了 END 方法2 点击window--preferences   点击general   点击edi

[转载]Eclipse Console 加大显示的行数,禁止弹出

Eclipse Console 加大显示的行数: 在 Preferences-〉Run/Debug-〉Console里边,去掉对Limit console output的选择,或者选择,设置一下buffer size的设定值 进制弹出: Preferences-〉 Run/Debug-〉Console里边 取消勾选 Show when program writes to standard out(当console中有值时弹出)前的选项 和 Show when program writes to

使用bootstrap table时不能显示筛选列和分页每页显示的行数

使用bootstrap table时不能显示筛选列和分页每页显示的行数 后来在同事的帮助下,才发现没有引用bootstrap的js文件 <script src="/Scripts/bootstrap/js/bootstrap.js"></script> 这个引用了就可以了

微信小程序 解决 view 文字 过多 溢出的问题,超过行数后隐藏显示省略号

多行文本 .note_item text { display: -webkit-box; font-size: 28rpx; color: #000000; line-height: 40rpx; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } 单行文本 .note2_item text { displa