单行文字溢出，CSS样式

<h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{$vo.title}</h6>

多行文字溢出，CSS样式

<p style="width:360px;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical;">{$vo.remark}</p>
-webkit-line-clamp:3   //表示超过3行时溢出

单行文字溢出和多行文字溢出省略号显示的CSS样式的更多相关文章

  1. [译]line clampin让文字在指定的行数内省略号显示

    说明 (1)原文:http://css-tricks.com/line-clampin/ (2)非直译 需求: 当文字长度超过N行时,文字后面自动用省略号补齐. 比如,你有如下的HTML代码: < ...

  2. HTML实现单行时文字居中，多行文字时左对齐显示效果

    css代码: div { width: 100px; padding: 5px; text-align: center; background-color: #5dffa0; } p { paddin ...

  3. css小技巧 --> 单标签实现单行文字居中，多行文字居左

    可能出现的尺寸场景: 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charse ...

  4. css实现一行文字居中，多行文字左对齐

    问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...

  5. css实现一行文字居中，多行文字居左

    第一种方法: <style> *{margin:0;padding:0;} .box{width:500px;height:300px;border:1px solid #000;text ...

  6. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  7. css 文本显示多行后用省略号显示剩余的

    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;      

  8. iOS - UIButton折行文字显示设置

    首先在控制器中创建一个button - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] i ...

  9. 多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content

    如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; ...

随机推荐

  1. 20190118-利用Python实现Pig Latin游戏

    1.利用Python实现Pig Latin字母游戏 “Pig Latin”是一个英语儿童文字改写游戏,整个游戏遵从下述规则:a. 元音字母是‘a’.‘e’.‘i’.‘o’.‘u’.字母‘y’在不是第一 ...

  2. rails中使用CarrierWave实现文件上传的功能

    之前在用django写blog的时候头像上传和头像预览都是使用原生的js实现的,之前也有写了一篇blog.好了开始进入正题 rails中实现头像上传十分的方便,只要通过CarrierWave这个gem ...

  3. Qt——事件

    1.常见事件 [1]鼠标事件 (1)坐标 x(),y(), 相对windows globalX() globalY() (2)获得点击 button() [2]键盘事件 [3]定时器事件 timerI ...

  4. 数据库操作-go

    原版 import ( "database/sql" _ "github.com/go-sql-driver/mysql" "fmt" ) ...

  5. Java设计模式（18）——行为模式之迭代子模式（Iterator）

    一.概述 概念 UML简图 // Aggregate:聚集(集合) 角色 抽象迭代子:定义遍历元素所需要的接口 具体迭代子:实现抽象迭代子接口,保持游标 聚集/具体聚集:定义/实现创建迭代子对象的接口 ...

  6. 20145202马超 2016-2017-2《Java程序设计》课程总结

    学号 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1(http://www.cnblogs.com/tuolemi/p/6193756.html ...

  7. 北京Uber优步司机奖励政策（3月17日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  8. spring源码-自定义标签-4

    一.自定义标签,自定义标签在使用上面相对来说非常常见了,这个也算是spring对于容器的拓展.通过自定义标签的方式可以创造出很多新的配置方式,并且交给容器直接管理,不需要人工太多的关注.这也是spri ...

  9. MySQL日期、字符串、时间戳互转

    平时比较常用的时间.字符串.时间戳之间的互相转换,虽然常用但是几乎每次使用时候都喜欢去搜索一下用法:本文将作为一个笔记,整理一下三者之间的 转换(即:date转字符串.date转时间戳.字符串转dat ...

  10. 第四模块：网络编程进阶&数据库开发 第2章·MySQL数据库开发

    01-MySQL开篇 02-MySQL简单介绍 03-不同平台下安装MySQL 04-Windows平台MySQL密码设置与破解 05-Linux平台MySQL密码设置与破解 06-Mac平台MySQ ...