<!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清除浮动&内容居中&文字溢出

    学习! 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. 移动端小总结(1)---meta、input和单行多行文字溢出省略号

    一.常用META 1. 添加到主屏后的标题(IOS) 1 <meta name="apple-mobile-web-app-title" content="标题&q ...

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

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

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

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

  8. css如何简单设置文字溢出盒子显示省略号

    1.单行文本溢出显示省略号单行文本溢出显示省略号,必须满足三个条件:(1)先强制一行内显示文本white-space:nowrap;(默认 normal自动换行)(2)超出的部分隐藏overflow: ...

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

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

随机推荐

  1. 在Centos7下安装nghttp2

    如果是Ubuntu18.04, 系统本身已经带了nghttp2了, 直接apt安装就可以. 下载源代码 https://github.com/nghttp2/nghttp2 如果是在Ubuntu下编译 ...

  2. dagger2 重点笔记

    官方架构例子,里面有个dagger2的结合的例子 https://github.com/googlesamples/android-architecture https://google.github ...

  3. [转]numpy 100道练习题

    100 numpy exercise 翻译:YingJoy 网址: https://www.yingjoy.cn/ 来源:https://github.com/rougier/numpy-100 Nu ...

  4. PHP-问题处理Fatal error: Uncaught Error: Call to undefined function mb_strlen()

    1.问题 今天重新安装了ubuntu,PHP,MySQL,Apache,到测试CMS项目时发生一个错误: Fatal error: Uncaught Error: Call to undefined ...

  5. 基于facebook-wda的iOS自动化操作实践记录

    [本文出自天外归云的博客园] 原理 对于iOS自动化操作,主要靠WebDriverAgent来完成.在Mac电脑上连接真机iPhone,运行WebDriverAgentRunner会在Mac端启动WD ...

  6. 强化学习-MDP(马尔可夫决策过程)算法原理

    1. 前言 前面的强化学习基础知识介绍了强化学习中的一些基本元素和整体概念.今天讲解强化学习里面最最基础的MDP(马尔可夫决策过程). 2. MDP定义 MDP是当前强化学习理论推导的基石,通过这套框 ...

  7. Unix时间转LInux时间

    private static long getTime() { long currentTimeMillis = System.currentTimeMillis(); long nanoTime = ...

  8. 关于JVM内存的N个问题

    JVM的内存区域是怎么划分的? JVM的内存划分中,有部分区域是线程私有的,有部分是属于整个JVM进程:有些区域会抛出OOM异常,有些则不会,了解JVM的内存区域划分以及特征,是定位线上内存问题的基础 ...

  9. MySQL 全文检索 ngram插件

    InnoDB全文索引:N-gram Parser[转] MySql5.7 建立全文索引 InnoDB默认的全文索引parser非常合适于Latin,因为Latin是通过空格来分词的.但对于像中文,日文 ...

  10. 同时使用Union和Order by问题(ORA-00933错误)解决

    之前,同事在编写视图的过程中遇到这样了这个错误.我把简化后的语句整理如下: 1: select 2: '2016' as nf, 3: qxdm, 4: round(sum(tbdlmj)/10000 ...