css 设置文本多行显示再隐藏

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title></title>
　　<style type="text/css">
　　　　#box{
　　　　　　width: 100px;
　　　　　　height: 46px;
　　　　　　overflow:hidden;
　　　　　　text-overflow:ellipsis;
　　　　　　display:-webkit-box;
　　　　　　-webkit-box-orient:vertical;
　　　　　　-webkit-line-clamp:2;
　　　　}
　　</style>
</head>
<body>
　　<div id="box">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</body>
</html>

时间： 2024-08-05 19:37:36

css 设置文本多行显示再隐藏的相关文章

img只显示图片一部分 或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

纯css控制文字2行显示多余部分隐藏

在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 3行代码搞定,这个很常见.但是要是2行文字显示多余隐藏呢,我之前在网上搜到的很多说什么用js去控制,用php控制...等等诸如此类的复杂方法,为什么不能同样用css去控制呢?后来找到答案了,用css同样可以去控制2行文字显示多余隐藏. text-overflow

设置文字多行显示溢出显示省略号

#news_text { border: 1px solid red; width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /*这里可以设置文本显示的行数*/ overflow: hidden; } <div id="news_text"> 要溢出去的文字

css 实现 ul li 的显示与隐藏

本文从CSS角度来实现导航栏的显示与隐藏,用到了ul.li标签 html源代码: css文件: 有点小感悟:总是先设置默认情况:默认不显示或者默认黑色,然后再设置hover时的具体情况 li颜色变化比较简单:设置个全局颜色(默认颜色),然后li:hover设置hover时的颜色: li 显示比较复杂,因为涉及到自菜单显示情况:总是先设置下属所有子菜单全显示,然后设置间接子菜单不显示(存在间接子菜单的情况).

JQuery采用CSS实现DOM元素的显示和隐藏

今天参加了一个Code Review活动,看了一个同事的写的代码,感觉满足了当前的功能实现,但是从长远来看,无论从代码复用角度还是维护上看都显得非常差.先看看需求是什么吧.需求是通过下拉框的选择不同的选项,来显示和隐藏一个文本框.同事是这样写的: Code 1 <select name="select" onChange="disinput(this)"> <option value="1">1</option>

jQuery 设置控件的显示与隐藏

//设置id为checkPwd显示的属性 $('#checkPwd').attr('show', 'show'); $('#checkPwd').attr('show', 'hide'); //设置id为checkPwd隐藏,显示 $('#euiPassword').hide(); $('#euiPasswordOne').show();

IDEA中设置Tab多行显示、打开过多自动关闭的方法

IDEA中默认Tab是单行显示的,而且默认允许同时打开10个Tab,继续打开Tab会根据规则关闭之前打开的Tab.但是可以通过设置来符合自己的使用习惯. 一.打开Tab过多自动关闭 1.选择File→Settings→Editor→General→Editor Tabs,将Tab limit的数量调高即可. 下面还可以选择,当数量达到设置的限制时,优先关闭Tab的规则: Close non-modified files first:优先关闭没有修改过的Tab. Close less freque

CSS实现控制元素的显示和隐藏

1 使用label + input实现元素的隐藏和显示 以下代码点击‘菜单’可以实现li列表的显示和隐藏: <style type="text/css"> *{ margin: 0; padding: 0; } input, ul{ display: none; } input:checked ~ ul { display: block; } </style> <body> <label for="menu">菜单&l

JS设置html元素的显示和隐藏

利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位.  方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页