<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
*{margin:0;padding:0;}
.box{width: 200px;height: 100px;background: red;position: relative;}
.box .text{position: absolute;top: 50%;transform: translateY(-50%);}
.s_ellipsis{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 200px;}
.m_ellipsis{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
</style>
</head>
<body>
<div class="box">
<div class="text">
子盒子上下居中子盒子上下居中子盒子上下居中
</div>
</div>
<br>
<div class="box">
<div class="text s_ellipsis">
单行省略号单行省略号单行省略号单行省略号
</div>
</div>
<br>
<div class="box">
<div class="text m_ellipsis">
多行省略号多行省略号多行省略号多行省略号多行省略号多行省略号
</div>
</div>
</body>
</html>

  

css 子盒子上下居中 文字溢出省略号的更多相关文章

  1. CSS清除浮动&amp;内容居中&amp;文字溢出

    学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>. ...

  2. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  3. 单行文字溢出和多行文字溢出省略号显示的CSS样式

    单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis ...

  4. css 一行或多行文字溢出以...的形式隐藏

    一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出 ...

  5. 使用es6一行搞定文字溢出省略号

    使用的是es6中扩展字符串方法参考地址 padStart(),padEnd() 使用padStart() 两个参数padStart(字符串最小长度,用来补全的字符串): 例如 let str = '1 ...

  6. css 让多出的文字成省略号...

    一,单行 white-space:nowrap; overflow:hidden;text-overflow: ellipsis; 二,多行 display: -webkit-box; overflo ...

  7. css 文字溢出隐藏 带省略号

    .demo{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 注意宽度要设置

  8. css文字溢出显示省略号

    1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. ...

  9. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

随机推荐

  1. NYOJ_37.回文字符串 (附滚动数组)

    时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 所谓回文字符串,就是一个字符串,从左到右读和从右到左读是完全一样的,比如"aba".当然,我们给你的问 ...

  2. 【实践】纯jquery实现图片滑动无缝轮播,带左右按钮及控制按钮

    在此随笔之前,博主已经做过一次图片滑动轮播,如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果,就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果,这是很不美观 ...

  3. hdu---(1280)前m大的数(计数排序)

    前m大的数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  4. 不是什么时候都可以用栈来声明对象并使用(自动释放)——Delphi里到处都是编译器魔法,并且自动帮助实例化界面元素指针

    一直都喜欢这样显示窗口,因为简单高效: void MainWidget::ShowMyWindow() { MyWidget form(this); form.resize(,); form.exec ...

  5. 关于使用 jBox 对话框的提交问题

    http://www.cnblogs.com/haogj/archive/2012/11/04/2754303.html 关于使用 jBox 对话框的提交问题 jBox 是个不错的对话框组件. 在 A ...

  6. Python爬虫从入门到放弃(二十)之 Scrapy分布式原理

    关于Scrapy工作流程回顾 Scrapy单机架构 上图的架构其实就是一种单机架构,只在本机维护一个爬取队列,Scheduler进行调度,而要实现多态服务器共同爬取数据关键就是共享爬取队列. 分布式架 ...

  7. MXNet之ps-lite及parameter server原理

    MXNet之ps-lite及parameter server原理 ps-lite框架是DMLC组自行实现的parameter server通信框架,是DMLC其他项目的核心,例如其深度学习框架MXNE ...

  8. R语言︱情感分析—词典型代码实践(最基础)(一)

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:词典型情感分析对词典要求极高,词典中 ...

  9. 凯撒密码加密解密--JAVA实现(基础)

    凯撒密码一种代换密码,据说凯撒是率先使用加密函的古代将领之一,因此这种加密方法被称为恺撒密码.凯撒密码的基本思想是:通过把字母移动一定的位数来实现加密和解密.明文中的所有字母都在字母表上向后(或向前) ...

  10. 高可用Redis(一):通用命令,数据结构和内部编码,单线程架构

    1.通用API 1.1 keys命令和dbsize命令 keys * 遍历所有key keys [pattern] 遍历模式下所有的key dbsize 计算Redis中所有key的总数 例子: 12 ...