<!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. php5.2.3连接sqlserver2008

    1,下载驱动 下载地址:https://www.microsoft.com/en-us/download/details.aspx?id=20098 我下载的是:SQLSRV20.EXE ,因为我的p ...

  2. oracle中根据当前记录查询前一条和后一条记录

    select * from aa01_2014 where aaa001=(select c.p from (select aaa001,lag(aaa001,1,0)  over (order by ...

  3. 更改python的编码问题：UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 56: ordinal not in range(128)

    as3:/usr/local/lib/python2.7/site-packages# cat sitecustomize.py # encoding=utf8 import sys reload(s ...

  4. Error:identifer “blockIdx” and __syncthreads() undefined

    #include "device_launch_parameters.h" for blockIdx #include "device_functions.h" ...

  5. 面向切面编程AOP

    本文的主要内容(AOP): 1．AOP面向切面编程的相关概念(思想.原理.相关术语) 2．AOP编程底层实现机制(动态代理机制:JDK代理.Cglib代理) 3．Spring的传统AOP编程的案例(计 ...

  6. jmap之使用说明与JVM配置

    详情可参见:http://blog.csdn.net/fenglibing/article/details/6411953. 1 2. 3.vi 打开查看,具体介绍请看上述链接. 4.查看tomcat ...

  7. Something about pip in Python

    学习python爬虫框架scrapy的时候,用到pip管理工具来安装scrapy.最直观的感受,pip有点类似于Ubuntu下的apt-get工具,几行代码,自动下载.安装相关的东西.网上查了一些背景 ...

  8. OpenStack 云计算基础知识

    OpenStack Docs: Currenthttp://docs.openstack.org/ OpenStack云计算快速入门教程 - OpenStack及其构成简介_服务器应用_Linux公社 ...

  9. Linux 安装基于（PHP5.5）memcache扩展

    一. memcache服务器端 下载地址:http://memcached.org/ 安装memcached,同时需要安装中指定libevent的安装位置 tar zxvf memcached-1.2 ...

  10. 算法系列：FFT 001

    转载自http://blog.csdn.net/orbit/article/details/17210461 2012年9月的时候,一个南京的大学生从电视台播放的一段记者采访360总裁周鸿祎的视频中破 ...