<!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. SVN：This client is too old to work with working copy…解决的方法

    解决svn:This client is too old问题 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlmbXlmbXlmbXlm/font/5a ...

  2. 用xcode9编译出ios越狱机程序使用的dylib

    因为xcode9默认不能创建dylib工程,所以 选择 静态库 工程后,修改编译选项使得变成dylib工程. 步骤: 一.xcode9 -> File -> New -> Proje ...

  3. iptables转发技术

    NAT 一. 什么是 NAT NAT(Network Address Translation)译为网络地址转换.通常路由器在转发我们的数据包时,仅仅会将源MAC地址换成自己的MAC地址,但是NAT技术 ...

  4. 如何知道局域网内哪些ip被占用----工具法Free IP Scanner

    在局域网中,尤其是在工作室和公司中需要修改IP地址才能上网,通常我们在设置完ip地址后会提示[该ip地址已被占用],又得回头去修改ip地址.本篇经验就介绍一款很好用的免费软件——Free IP Sca ...

  5. matlab与python读取tiff文件

    matlab t=Tiff('IMG_3952.TIF', 'r+'); k = 1; t.setDirectory(k); img{k} = t.read(); src = img{1}; dst( ...

  6. What is a TensorFlow Session?

    Sep 26, 2016 I've seen a lot of confusion over the rules of tf.Graph and tf.Session in TensorFlow. I ...

  7. List接口：（介绍其下的两个实现类：ArrayList和LinkedList）

    以下介绍接口: List接口:(介绍其下的两个实现类:ArrayList和LinkedList) ArrayList和数组非常类似,其底层①也用数组组织数据,ArrayList是动态可变数组. ①  ...

  8. (转)The C10K problem翻译

    The C10K problem 如今的web服务器需要同时处理一万个以上的客户端了,难道不是吗?毕竟如今的网络是个big place了. 现在的计算机也很强大了,你只需要花大概$1200就可以买一个 ...

  9. Ubuntu命令行快捷启动Matlab

    转载:https://blog.csdn.net/striker_v/article/details/52884485 Matlab R2015b默认安装目录/usr/local/MATLAB/R20 ...

  10. 目前（2018年）在北京java程序员平均薪水是多少呢？

    1. 这个要看看个人java开发能力,你那个自己带项目做团队的比较高哦 2. 一般来说刚毕业的本科实习生大约在5000左右,干半年基本都张到7.5左右了. 3. Java程序员一般都集中在北京,上海和 ...