溢出文本用“...”代替

之前一直尝试用但是总出不来效果,今天写代码又用这个,发现自己用错地方了,(⊙﹏⊙)b.....

先上正确代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>text-overflow: ellipsis;</title>
 6 </head>
 7 <style>
 8     .text-overflow {
 9         display: inline-block;
10         white-space: nowrap;
11         overflow: hidden;
12         text-overflow: ellipsis;
13     }
14     a{
15     width:110px;
16     }
17 </style>
18 <body>
19 <a href="#" class="text-overflow">测试文字能否被截取</a><br>
20 <b class="text-overflow" style="width:100px;">测试文字能否被截取</b>
21 </body>
22 </html>

今天是将新闻列表中的溢出文本用“...”代替,第一次发现自己将css样式写到了ul标签中,后来发现写进了li标签中都不能用,最后换到a标签中就可以了,原来作用的是内部的a标签,真马虎

写的html样式是:

<ul><li><a>我是内容</a></li></ul>

时间: 2024-10-05 09:49:10

溢出文本用“...”代替的相关文章

css text-overflow溢出文本显示省略号

<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象内文本溢出时显示省略标记</nobr></div> 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...)

CSS学习笔记:溢出文本省略(text-overflow)

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应

用css截取字符 css排版隐藏溢出文本

方法一: <div style="width:300px; overflow:hidden;  text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串  </div> 说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号.缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会被认为是字符总长的百分比. 方法二: <input type="text

《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 语法: text-overflow:clip | ellipsis | ellipsis-word 取值简单说明: clip属性值表示不显示标记,而是简单的裁切. ellipsis属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). ?实际上,te

CSS溢出文本省略(text-overflow)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> dl{ width:240px; border: solid 1px #ccc; } dt{ padding:8px 8px; background: #7fecad; font-size: 13px

新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用‘...’来代替, 我一想 这简单啊 只要给div加上text-overflow:ellipsis;属性就好了呗, 结果 怎么调也不行,你说把我压抑的啊 经过一阵查终于找到原因出在哪里里 原来text-overflow:ellipsis;的属性 得需要另外两个属性的配合才能实现 这俩分别是 over

css 溢出文本显示省略号

这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用javascript截取一定的字符,但 是通过控制字数来截取的话还是存在一个大问题的,因为中文和英文的字符宽度问题,这个字数不好控制,而且通用性较差.那么有没有更好的方法呢,比如直接用 CSS来解决的,当然是有的. text-overflow是一个

用JS解决多行溢出文本的省略问题

前言 在项目开发过程中,经常会遇到溢出文本的省略问题.根据需求,可以把文本省略分为单行文本省略和多行文本省略两类. 单行文本的省略,现在css样式 text-overflow 已经有兼容性很好的样式支持了.但是多行文本,目前支持webkit内核的css样式 -webkit-line-clamp 可以做到,但它针对火狐浏览器就行不通了.这就是本文要解决的问题. css解决方案(可跳过) 如果上网搜索[多行文本省略],除了上文提到的css样式控制,找到的答案都是做固定位置的遮盖,而且能发现的是,目前

08.05 边框图片 盒子倒影 新增属性 文本阴影 文本属性 文本换行 文本溢出 文本修饰 文字描边 其他属性

---恢复内容开始--- ### 边框图片 * border-image-source   图片地址 * border-image-slice     图片截取方式 值 浮点数/百分比 * border-iamge-width   边框图片厚度  值 长度单位 * border-image-outset   外延   值 长度单位 * borde-image-repeat    延伸方式  值 stretch/repeat/round/space * border-image border-im