<!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. P2P贷款全攻略,贷前、贷中、贷后工作事项解析

    一.贷前调查事项 贷前调查是所有银行.小贷.P2P等等往出贷款部门的重中之重. 归根结底就是两条:让不对称信息最大限度对称.让软信息最大限度真实还原. 客户还不还款就是取决两大因素:还款能力.还款意愿 ...

  2. K-means算法原理

    聚类的基本思想 俗话说"物以类聚,人以群分" 聚类(Clustering)是一种无监督学习(unsupervised learning),简单地说就是把相似的对象归到同一簇中.簇内 ...

  3. 【C++】C++中的基本内置类型

    基本数据类型 下面这张表是C++支持的基本数据类型 类型 含义 最小尺寸 bool 布尔 未定义 char 字符 8位 wchar_t 宽字符 16位 char16_t Unicode字符 16位 c ...

  4. oracle 函数 输入值，查询数据，返回相应处理结果

    create or replace function FUN_SEARCH_ORDERBY ( INSTACEID in varchar2,TYE IN varchar2) return varcha ...

  5. 【解惑】领略Java内部类的“内部”

    转自:http://www.iteye.com/topic/494230 内部类有两种情况: (1) 在类中定义一个类(私有内部类,静态内部类) (2) 在方法中定义一个类(局部内部类,匿名内部类) ...

  6. linux安全配置检查脚本_v0.8

    脚本环境:RHEL6.* 脚本说明:该脚本作用为纯执行检测不涉及更改配置等操作,与直接上来就改安全配置等基线脚本相比相对安全一些.虽然如此,在你执行该脚本之前仍然建议你备份或快照一下目标系统. 代码部 ...

  7. idea maven 集成多模块 module

    首先第一步创建 顶级项目  也就是父项目 在创面那部中 不管你勾不勾 create from 那个选项 都无所谓,最终创建的项目要全删的 ,只保留pom.xml 父项目结构 接下来 创建子项目  也是 ...

  8. sqoop 测试 --hive-delims-replacement 参数

    在hive的官方文档中给的例子中字段分隔符是\001,但是在他的API文档中--hive-delims-replacement ,--hive-drop-import-delims   参数中会处理的 ...

  9. mysql分区方案的研究

    笔者觉得,分库分表确实好的.但是,动不动搞分库分表,太麻烦了.分库分表虽然是提高数据库性能的常规办法,但是太麻烦了.所以,尝试研究mysql的分区到底如何. 之前写过一篇文章,http://www.c ...

  10. Android深入源代码分析理解Aidl总体调用流程（雷惊风）

    2017年開始上班的第一天.老不想工作了,假期感觉还没開始就已经结束了,唉,时间就是这样,新的一年開始了,尽管非常不想干正事,没办法,必须干起来.由于后边的路还非常长,距离六十岁还非常远. 刚上班也没 ...