css3 特性实现多行展示，超过则以省略号显示

最近做移动端的项目，遇到一个问题，要求文章的标题，如果太长的话，则默认显示两行，超过则以省略号显示。

很容易查找到利用css显示一行，如果超过则以省略号显示。

多行显得资料有点少

实现方法如下

实现效果

时间： 2024-11-06 07:27:51

css3 特性实现多行展示，超过则以省略号显示的相关文章

css 文字展示两行其余的省略号显示

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .comment_inner{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /**

<!doctype html> <html> <head> <meta charset="UTF"> <title>js和CSS3炫酷3D相册展示</title> <style> *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overflow:hidden;}; h1{width:277;hei

[转]JavaScript快速检测浏览器对CSS3特性的支持

转自:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/ -------------------------------------------------------------------------------------------------- 在项目中需要快速检测浏览器是否支持某CSS3特性,比如检测是否支持“transform”,然后我的布局会有两种完全不同的版式. 当然除开本文介绍的这种快

CSS3 3D变形制作视频展示区

<div id="container"> <h1>CSS3 3D变形制作视频展示区</h1> <div class="wrapper"> <div class="item"> <img src="http://pic2.qiyipic.com/image/20140415/4e/32/5f/v_105669963_m_601_180_101.jpg" />

CSS特效（7）——单行居中，多行居左，超过两行用省略号

单行居中,多行居左,超过两行用省略号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块)

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块) 上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = []; var menuData = this.get('systemMenu'); // 取得定义好的菜单数据 Ext.A

eclipse重的自动提示与行号和快捷图标的显示

显示行号:Window->Preferences->Gerenal->Editors->Text Editors然后在show line number上打对勾自动提示:Window->Preferences->java->Editor->Cintent Assist->Auto activation triggers for java 在后边框中写想要提示的内容显示eclipse中的快捷图标:Window->show toolbar

JSTL FOREACH循环每行两和三列的显示方法

1 //两列的 2 <c:forEach var="bean" items="${result}" varStatus="status"> 3 <c:if test="${status.count%2==1}"> 4 <tr> 5 </c:if> 6 <td><b>$...{bean.id}</b>:$...{bean.name}</td

MFC 编辑框中字体大小改变，行高不能改变，只能显示一半的问题，已解决。

CKagulaCEdit是CEdit的一个继承类,m_edit的CKagulaCEdit类型的一个变量调用的时候,是这样的: 编辑框中字体大小改变,行高不能改变,只能显示一半的问题,问题如下: 这时的显示是这样的: 添加 CEdit::SetFont(m_pfont);这行后, 显示正常: