<!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. js遮罩效果

    function ShowLoadingMaskLayer(text) { var htmlContent = '<div id=\"masklayer\">' + ' ...

  2. button按钮

    button按钮只加类名不加type时,点击此按钮页面会刷新

  3. JAVA中static关键字

    用法:是一个修饰符,用于修饰成员(成员变量,成员函数),不能用于修饰局部变量!被static修饰后,就多了一种调用方式,除了可以被对象调用外,还可以直接被类名调用,写法格式是:类名.静态成员.优点:被 ...

  4. 简单Java算法程序实现！斐波那契数列函数~

    java编程基础--斐波那契数列 问题描述:一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 思路:可能出现的情况:(1) n=1 ,一种方法 ;(2)n=2 ...

  5. SpringBoot实战配置

    http://blog.csdn.net/sun_t89/article/details/51944252 http://www.cnblogs.com/kreo/p/4423362.html

  6. 网络知识学习1---（基础知识：ISO/OSI七层模型和TCP/IP四层模型）

    以下的内容和之后的几篇博客只是比较初级的介绍,想要深入学习的话建议自己钻研<TCP/IP详解 卷1:协议> 1.ISO/OSI七层模型    下四层是为数据传输服务的,物理层是真正的传输数 ...

  7. jQuery 中时间显示的模版

    function setTime() {                 var time = new Date();                 var year = time.getFullY ...

  8. 如何在UMG蓝图中动态创建控件

    把控件作为UObject即可,在c++中则使用NewObject函数

  9. JS 生成GUID 方法

    var Guid={NewGuid: function () { var guid = (this._G() + this._G() +"-"+ this._G() +" ...

  10. cocos2d-x初步了解

    1.渲染 2.帧率(FPS) 超过75一般就不容易察觉到有明显的流畅度提升 >50 非常好! 30~40  一般, 20~30  及格,有点勉强. 3.渲染驱动游戏 事件驱动游戏 4.cocos ...