问题1：设置了text-overflow : ellipsis未起作用
<style type="text/css">
* {
padding: 0;
}
.div01 , .div02 {
margin-top: 10px;
border: 1px solid black;
}
.div01 {
width: 150px;
height: 80px;
display: -moz-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
-moz-box-orient: vertical;/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden; }
.div02 {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
</style>
<body>
<div class="div01">
<p>测试多行文字省略:测试多行文字省略测试多行文字省略测试多行文字省略测试多行文字省略测试多行文字省略</p>
</div>
<div class="div02">
<p>测试单行文字省略:测试单行文字省略测试单行文字省略</p>
</div>
</body>
运行后显示如下：
万能解决方式：针对一行和多行的省略显示
<style type="text/css">
* {
padding: 0;
}
.div01 , .div02 {
margin-top: 10px;
border: 1px solid black;
width: 150px;
height: 80px;
display: -moz-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
-moz-box-orient: vertical;/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
overflow: hidden;
}
.div01 {
-webkit-line-clamp: 3; }
.div02 {
height:40px;
-webkit-line-clamp: 1;
}
</style>
<body>
<div class="div01">
<p>测试多行文字省略:测试多行文字省略测试多行文字省略测试多行文字省略测试多行文字省略测试多行文字省略</p>
</div>
<div class="div02">
<p>测试单行文字省略:测试单行文字省略测试单行文字省略</p>
</div>
</body>
运行结果：
方法三：
js超出隐藏
/**
* str(需要截取的字符串)
* num(需要截取的字符串字数)
*/
isOverLength(str,num) {
var consultArray = str;
for(var i=0; i<consultArray.length; i++){
var txt = consultArray[i].innerText;
if(txt.length <= num){
return;
}else {
consultArray[i].innerText = txt.substr(0,num) + '...';
}
}
}
问题1：设置了text-overflow : ellipsis未起作用的更多相关文章
- jquery easyui-linkButton获取和设置按钮text并且解决火狐不支持innerText的方法
<a href="javascript:test" id="btn" class="easyui-linkbutton" iconCl ...
- [转] 设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿
设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿,所以在这个div上加一个css: -webkit-overflow-scrolling : touch; 在苹果手机上使用- ...
- uitabbar 标题设置 button text attributes only respected for UIControlStateNormal
uitabbar 标题设置 button text attributes only respected for UIControlStateNormal [[UITabBarItem appearan ...
- sublime点击预览未起作用?教你如何设置支持浏览器预览
我用的text3版,其他版本未试,但应该也有效. 安了个view in browser插件,然而点击预览未起作用. 搜解决方法,发现了另一个插件,sidebar enhancements,设置快捷键预 ...
- jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val() , 设置属性 - attr()
jQuery - 设置内容和属性 设置内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTM ...
- 转：css中overflow:hidden 不起作用了吗？
css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...
- VM搭建Hadoop环境静态IP未起作用
原文 https://www.toutiao.com/i6481452558941438478/ 问题描述 1.环境工具 VMware_workstation_full_12.5.2 CentOS-7 ...
- ## GridView 布局：item设置的高度和宽度不起作用、自动适配列数、添加Header和Footer ##
一.item设置的高度和宽度不起作用 转自:http://www.cnblogs.com/0616--ataozhijia/p/6031875.html [Android Pro] listView和 ...
- 不能设置sublime text 2 为默认编辑器
今天遇到一个有趣的事情,当我设置 css 样式表的默认打开方式的时候,却始终无法设置成功,系统总是随机选取一种打开方式来打开文件.比如:pdf.DW.txt等方式. 我设置默认打开方式的步骤如下: 1 ...
随机推荐
- delphi 调用Webservice 引入wsdl 报错 document empty
delphi 调用Webservice 引入wsdl 报错 document empty 直接引入wsdl 地址报错 document empty 解决办法:在浏览器里保存为xml文件,然后在开发环境 ...
- C++中map用法详解《转》
Map是c++的一个标准容器,她提供了很好一对一的关系,在一些程序中建立一个map可以起到事半功倍的效果,总结了一些map基本简单实用的操作! . map最基本的构造函数: map<string ...
- const 关键字总结
int a; const int* p = &a; == int const * p = &a; 表示通过p不能修改a的值. const int a; int *p = &a ...
- 虚拟机mac 与主机的网络共享
1. 主机建立共享文件夹 aaa 2.虚拟机采用桥接 3.mac打开Finder 找到 “前往” 连接服务器”输入“smb://192.168.1.xx”(你电脑的ip地址),点击连接.
- python语言中的数据类型之字典
数据类型 字典类型dict 用途:记录多个值,列表是索引对应值,而字典是key对应值,其中key对value有描述性 定义方式:在{ }用逗号分隔开多个元素,每个元素都是key:value形式,其中k ...
- libcurl+OpenSSL 库分享
首先,我要感谢这两个博客给我的帮助: https://www.cnblogs.com/findumars/p/7496122.html https://blog.csdn.net/yannanxiu/ ...
- 转：HTML5页面如何在手机端浏览器调用相机、相册功能
HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...
- t959 unknown device 解决办法
换机器没用 换数据线没用 最后装了Kies3,好了! -------- 更新 跟数据线也有关系 换一条三星自带的试试
- 终止执行js的方法
(一)在function里面 (1)return;(2)return false; (二)非function方法里面 alert("before error.");throw Sy ...
- php正则替换双引号里面的字符