<!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. PowerShell 显示气球提示框 2

    https://www.itninja.com/blog/view/reboot-required-toast-notifications-for-windows-machines [void][Sy ...

  2. 【C++】C++中的函数

    目录结构: contents structure [-] 简介 可变形参的函数 initializer_list形参 省略符形参 main函数处理命令行选项 函数指针与函数引用 inline内联函数 ...

  3. 【C++】C++中的迭代器

    目录结构: contents structure [-] 迭代器运算符 迭代器类型 begin和end运算符 迭代器的算术运算 可以使用下标来访问string对象或vector对象的元素,还有另外一种 ...

  4. WebRTC的视频解码原理简析

    WebRTC的视频部分,包含采集.编解码(I420/VP8).加密.媒体文件.图像处理.显示.网络传输与流控(RTP/RTCP)等功能. 视频采集---video_capture:       源代码 ...

  5. js 模仿jquery 写个简单的小demo

    <div id="div" style="background:red;width:100px;height:300px"> 123123123 & ...

  6. C语言socket编程

    建议先去看一下思路 真的写的很不错呦~ 思路参考博客:https://www.cnblogs.com/renfanzi/p/5713054.html linux c语言socket编程代码(单一服务端 ...

  7. mac下安装mysql5.7.18，连接出现Access denied for user 'root'@'localhost' (using password: YES)

    mac下,mysql5.7.18连接出错,错误信息为:Access denied for user 'root'@'localhost' (using password: YES) ()里面的为she ...

  8. 用命令创建MySQL数据库

    一.连接MYSQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1. 连接到本机上的MYSQL. 首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u roo ...

  9. shell脚本 切换用户

    如下: #!/usr/bin/expect -f spawn su root expect "Password:" send "mypasswd\r" inte ...

  10. Http url MVC Request Query Form 传参专贴

    一.工具区 [参考]postman中 form-data.x-www-form-urlencoded.raw.binary的区别--转 二..net MVC 三..net WebForm 四.Java ...