<!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文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  2. css文字溢出隐藏，及强制断句

    只显示一行文字,便溢出隐藏 text-overflow: ellipsis; white-place: nowrap; overflow: hidden; 显示 n 行文字后便溢出隐藏  displa ...

  3. css 文本换行 文本溢出隐藏用省略号表示剩下内容

    正常文本的显示 <style> p{ width: 300px; box-shadow: 0 0 10px #ccc; padding: 0 20px; margin: 20px 100p ...

  4. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  5. CSS文字溢出处理问题

    单行省略 div { white-space:nowrap; //断行处理:无断行 text-overflow:ellipsis; //文字溢出处理:省略号 overflow:hidden; //溢出 ...

  6. CSS文字溢出部分自动用"..."代替

    CSS文字溢出部分自动用"..."代替 如html部分: <h4><马尔代夫双鱼岛Olhuveli4 晚6 日自助游></h4> <p&g ...

  7. js 强制换行及 单行文字溢出时出现省略号

    /*强制换行*/.f-break {word-break:break-all; /*支持IE,chrome,FF不支持*/ word-wrap:break-word;/*支持IE,chrome,FF* ...

  8. CSS 文字溢出时的自动隐藏

    http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...

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

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

随机推荐

  1. HDU 4859 海岸线（最大流最小割）

    难得的中文题,就不翻译了. 输入第一行为T,表示有T组测试数据.每组数据以两个整数N和M开始,表示地图的规模.接下来的N行,每一行包含一个长度为M的字符串,表示地图,‘.’表示陆地,’E’表示浅海域, ...

  2. 错误：ORA-28009: connection as SYS should be as SYSDBA or SYSOPER 的解决办法--转载但验证过后可以用

    今天,用iSQL*Plus 以sys用户连接数据库的时候报ORA-28009:connection as sys should be as sysdba or sysoper的错误,不知道是怎么回事, ...

  3. 滚动div至底部

    document.getElementById("chat").scrollTop=document.getElementById("chat").scroll ...

  4. 整理UWP中网络和设备信息获取的帮助类，需要的拿走。

    网络(运营商信息,网络类型) public static class NetworkInfo { /// <summary> /// 网络是否可用 /// </summary> ...

  5. javascript将object转string字符串

    var jsonData = {a:1,b:2}; function obj2string(o) { var r = []; if (typeof o == "string") { ...

  6. DataSet、DataTable、Json、List 等各种数据的相互转化

      1.根据Dataset生成json格式的字符串,不管Dataset里面有多少个表都可以一一生成对应的json字符串,并一次性返回 private string dsToJson(DataSet d ...

  7. java-集合3

    浏览以下内容前,请点击并阅读 声明 Queue接口(队列) 需要对一些列的元素进行处理前,我们可以把他们放到Queue对象中,除了继承Collection接口的方法外,队列还有一些插入,删除和检查操作 ...

  8. Tornado学习笔记12 tornado.httpserver-.非阻塞的Http服务器

    是一个非阻塞的,单线程的Http 服务器. 一般地,应用程序很少与HttpServer类直接交互,除非在进程开始时启动服务时(甚至在使用tornado.web.Applicaiton.listen时也 ...

  9. 什么是BFC？（转载）

    在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很 ...

  10. C#对图片的操作

    1.根据图片路径返回字节 public static byte[] getImageByte(string imagePath) { FileStream files = new FileStream ...