css设置两行多余文字用..显示】的更多相关文章

display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta…
项目中很多情况都要求多余的文字要以省略号的形式展示在前端页面上.虽然用的多,但是我也不知道为啥,我始终记不住.所以,通过这种方式,让自己加深一下印象 情况一:单行文字超出规定宽度后,以省略号形式展示 具体的样式如图: 代码: .css{ width:200px;//示例宽度 height:40px;//示例高度 overflow:hidden; width-space:nowrap; text-overflow: ellipsis; overflow: hidden; white-space:…
本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("http://img.pincai.com/article/repeatBg.gif") repeat-x scroll 0 -161px rgba(0,0,0,0); } 但不知道为什么在ie6.7.8下,背景都无法显示,在更高级的ie和Firefox.chrome下都是正常的. 排除图片链接的有效性…
常见的三种方式 display display: none 隐藏对象 display: block 除了转换为块级元素以外,同时还有显示元素的意思 特点:隐藏之后不保留位置 visibility 值hidden: 隐藏后还保留位置 值visible: 对象可视化 overflow 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容 visible: 不剪切内容也不添加滚动条 auto: 超出自动显示滚动条,不超出不显示滚动条 hidden: 不显示超过对象尺寸的内容, 超出的部分全部隐藏掉…
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;…
通常偏移掉字体的方式是 (1)使用text-indent:-9999px; 可是他有一个局限性 他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:-9999px;虽然用起来比较惬意将a转化成block的话 往往 他身后的的元素就被他赶到下一行了如果正好这个a后面 是一个a按钮就要用float来浮动以使他身后再出现簇拥者这样是不是有些麻烦呢 (2)line-height:0;font-size:0;overflow:hidden; 能完美"隐藏&…
如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始终显示滚动条:auto 根据文字多少自动显示滚动条 text-overflow: 在overflow设置隐藏的情况下怎么显示 clip裁剪ellipsis省略号显示 那么让多余文字省略号显示需要以下三步: ①white-space:nowrap;如果是中文 设置文字超出范围不断行 ②overflow…
在HTML网页中通常一段文字都需要设置首行缩进两个文字,使页面更加美观,我们可以通过css实现这一效果,下面我们就来看一下使用css设置首行文字缩进的方法. css可以使用text-indent属性来设置首行文字缩进,我们可以通过设置text-indent属性的属性值来设置缩进的大小. 示例: 设置首行文字缩进两字符: <html> <head> <style type="text/css"> p {text-indent: 2em} </st…