末尾显示....的用法
来源:互联网 发布:java语言开发环境 编辑:程序博客网 时间:2024/04/29 04:05
文字超出的部分显示……
看到一个博客上的示例代码
CSS代码:.box { width: 400px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}HTML代码:<div class="box"> 【大众点评与美团网合并 王兴张涛担任联席CEO】大众点评网与美团网今天联合发布声明,宣布达成战略合作,双方已共同成立一家新公司。新公司将实施Co-CEO制度,美团CEO王兴和大众点评CEO张涛将同时担任联席CEO和联席董事长,重大决策将在联席CEO和董事会层面完成。</div>
显示效果如下
应用到项目里的时候也想实现这样的效果,但是出了问题,
如图,tr竖行显示了,
找了半天原因,原来这个代码
display: -webkit-box;
这段代码需要加到块级元素上才行
调整后,又成这种效果
就是没出…,解决方法,再加一段代码
word-break: break-all;
语法
word-break: normal|break-all|keep-all;
值 描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
到此,要求达到,感谢同事的努力
补充一点,除以上方法外,还可用js来解决
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div class="limit" style="border: 1px solid black;"> 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 </div></body></html><script src="./jquery-1.12.2.js"></script><script>$(function(){ var width = 10; if($('.limit').text().length>width){ $('.limit').text($('.limit').text().substring(0,width)); $('.limit').html($('.limit').html()+'...'); }})</script>
显示效果
阅读全文
0 0
- 末尾显示....的用法
- UILabel 末尾显示更多
- 关于在结构体末尾定义空数组的用法
- char data[0]在struct末尾的用法
- 使textview末尾显示省略号
- 写在这四年的末尾
- 阶乘末尾的0
- 五月的末尾
- 函数的末尾
- 函数的末尾
- lintcode-末尾的零
- OpenJudge_P7833 幂的末尾
- 阶乘末尾的零
- 末尾0的个数
- 末尾0的个数
- 末尾0的个数
- 1332: 幂的末尾
- 末尾0的个数
- 【Python学习系列十九】基于scikit-learn库进行特征选择
- request.getContextPath() 基础
- 07_Qt的三大窗口dialog、widget、mainwindow
- Tomcat安装
- C-COT 【目标跟踪】论文解读
- 末尾显示....的用法
- 7月大限至 零部件信息谁敢藏?
- Macaca之使用中存在的各种坑
- iOS编译项目的速度优化
- 2017下
- MOOC清华《程序设计基础》第3章:谁是嫌疑犯(位运算循环枚举)
- java环境变量配置明明是1.7,为什么cmd java-version还是1.6呢?
- poll服务器与客户端
- 智能一代云平台(三十三):log4j日志研究