效果: <p><strong>商品名称:</strong>新鲜现摘云南绥江半边红李子甜脆脱骨李6斤当季绿色有机水果包邮</p></div> p{ display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px; }

通常偏移掉字体的方式是 (1)使用text-indent:-9999px; 可是他有一个局限性 他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:-9999px;虽然用起来比较惬意将a转化成block的话 往往 他身后的的元素就被他赶到下一行了如果正好这个a后面 是一个a按钮就要用float来浮动以使他身后再出现簇拥者这样是不是有些麻烦呢 (2)line-height:0;font-size:0;overflow:hidden; 能完美"隐藏&

<meta charset="utf-8" /> <style> .txt{ width:200px; border:1px solid #ddd; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> <p class="txt">溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出</p>

项目中很多情况都要求多余的文字要以省略号的形式展示在前端页面上.虽然用的多,但是我也不知道为啥,我始终记不住.所以,通过这种方式,让自己加深一下印象 情况一:单行文字超出规定宽度后,以省略号形式展示 具体的样式如图: 代码: .css{ width:200px;//示例宽度 height:40px;//示例高度 overflow:hidden; width-space:nowrap; text-overflow: ellipsis; overflow: hidden; white-space:

日常开发中常常会碰到,字符长度太大,撑破了样式的问题.如果采用截取的话,显然是不灵活的.但是通过css样式来控制显示就比较简单和高效了.下面是关键代码 样式名称{wedth:??px;height=??px;overflow:hidden;} 关键代码是overflow. 对比截取字符串来控制显示长度.第一不会抛异常,第二复用率很高. 这样带来的好处是,不用在求美工来弄了,自己就可以解决了.

<meta charset="utf-8" /> <style> .txt{ width:200px; border:1px solid #ddd; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> <p class="txt">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>

建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找了一下CSS隐藏文字的方法,有以下几条: 1.display:none; 这个大家普遍说法是,搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,不为隐藏的对象保留物理占位空间.GG也搜CSS文件?不过如果用这个方法,<h1>如何设计,也是难题. 2.visibility:hidden; 和disp

.textone { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 25px; max-height: 25px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } 将行高和最大行高设置为一样的值,-webkit-line-clamp: 1,限制行数,这样就可以定义超过一行自动隐藏的效果了:设置超过两行自动隐藏是效果,line-

.green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; margin: 20px; line-height: 100px } .myDiv { opacity: 0 } .myDiv:hover { opacity: 1 } .blue { width: 100px; height: 100px; background-color: #b7f9fb; tex

用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute 然后将位置设到不可见区域.   Opacity,占据网页布局,可以交互,读屏软件可以读到它    opacity 属性的意思是设置一个元素的透明度.它不是为改变元素的边界框(bounding box)而设计的.这意味着将 opacity 设为 0 只能从视觉上隐藏元素.而元素本身依然占据它自己的位

原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域. 你有没有想过,为什么我们要有这么多技术来隐藏元素,而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法.这篇教程将覆盖到

含义: 图像替代,就是像我们在平时将文本添加到文本中,然后通过css隐藏文本在它的位置上显示一个背景图片,这样,搜索引擎仍然可以搜到HTML文本,即使我们禁用css后,文本时仍然是可以显示的. 引用<精通css>中的一段解释: HTML文本由很多的优点.文本可以被搜索引擎读取,开发人员可以对其进行复制和粘贴,并且在浏览器中改变字体大小后,它也会改变.因此很多设计人员都想尽量的采用HTML文本而不是文本的图像,但是遗憾的是,页面设计人员对于文本有有限的选择,尽管可以通过css来控制版面但是有很多

用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域. 你有没有想过,为什么我们要有这么多技术来隐藏元素,而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法.我们只需要记住的细小不同点,根据不同情况选择上面这些方法中适合的方法来隐藏元素. d

使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析,不能点击,搜索引擎可能会认为被隐藏的文字属于垃圾信息而被忽略,而且屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字. 2.visibility:hidden 使用 visibility:hidden 隐藏的元素,不能点击,但是会占据文档空间,不够灵活,一般配合 posi

HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签. 语法: <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> 例如: <a href="http://www.baidu.com" title="点击进入百度&qu

HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签.文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等. 讲了这么多语义化,但是语义化可以给我们带来什么样的好处呢? 更容易被搜索

xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.对于这个bug一般有3种解决方案,方法1: 代码如下: html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条优点:完全解决了这个问题, 允许你保持完整的XHTML doctype.缺点:即使页面不需要垂直滚

div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css隐藏滚动条 6.css隐藏div层 一.使用css隐藏方法用到CSS样式单词及对应解释   -   TOP 1.使用display:none;来隐藏所有信息(无空白位占据)推荐,CSS display手册查看2.使用overflow:hidden;来隐藏溢出的文字或图片 适用推荐,css overf

Safari 浏览器会为 <input type="passport"> 标签自动添加一个小锁的图标(如下图),本意上是让用户可以从这里选择相应的 用户名/密码 进行自动填充,但是在某些场景下需要将其隐藏,可能是出于安全性考虑,当然也有可能出于 UI 样式方面考虑. 从网上可以搜到很多种有效的解决方法,例如下面的代码就是其中之一,但是很少会告诉你为什么要这样做,以致于下次再遇到这样类似的问题时,还是要借助于 Google.Baidu. input::-webkit-cred

使用CSS隐藏所有tab页,然后使用JavaScript给选中的元素对应ID的tab页设置class="active"类来显示该元素,以此实现tab切换. 如鼠标放置到shwww时,其data-id对应的属性为#cate1,然后使用选择器选中该id对应的元素并设置类属性,完整demo代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF