css截断长文本显示

截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于SEO。

而通过前端css的截断,则灵活多变,可统一运用与整个网站。

这项技术主要运用了text-overflow属性,这个虽是css3的属性,但是在各大浏览器却兼容

非常好,ie6系列全部兼容。

        .e{
            display:inline-block;width: 40px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
        }
        .e:hover{
            cursor: pointer;text-overflow: clip;width: auto;
        }    

 <span class=‘e‘>abcdddsdsafdsacdsavdsac</span>

宽度需要指定,这样设置隐藏的宽度,而且也可出发IE67的hasLayout。

时间: 2024-10-26 14:21:23

css截断长文本显示的相关文章

CSS控制长文本内容显示(截取的地方用省略号代替)

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行显示,并且截取一定的长度,截取的地方用省略号代替.虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,活用CSS可以巧妙地解决这个问题,请看下面的代码:代码一:用于非表格LI或span等都可以 www.169it.com .text-overflow { display:block;/*内

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

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

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

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

【css】长文本左侧显示省略号

https://blog.csdn.net/renfufei/article/details/85159967 .ellipsize-left { /* 常规的CSS省略 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; /* 让省略符显示在文本左侧 */ direction: rtl; text-align: left; } 原文地址:https://www.cnblogs.com/

(轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)

轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html html代码:<div><p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p></div> css代码:div{width:200px;/*容器的基本定义*/height:200px; } /* IE下的样

CSS word-wrap强制换行截断长字符串

<html> <head> <title>CSS截断长字符串,强制换行</title> </head> <style> .wordWrap{word-wrap:break-word; word-break:break-all;} </style> <body> <div class="wordWrap">rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrffffffff

css 溢出文本显示省略号

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

浅谈移动端过长文本溢出显示省略号的实现方案

本文首发于 vivo互联网技术 微信公众号? 链接: https://mp.weixin.qq.com/s/39NCyZvm8EYiJ-pEEtjxGw 作者:何彦军 目前在移动端开发的展示界面中,如果一段文本的数量过长,受限于屏幕的宽高等因素,有可能不能完全显示,这个时候就会把溢出的文本显示成省略号. 最近就亲身经历了一系列类似的需求,于是这里做个总结和记录. 首先一个最基本的需求就是当文本超过一行最大宽度时,超出的部分变为省略号,如下图所示. 这个功能比较基础,只用css就可以实现,如下图所

CSS的color属性并非只能用于文本显示

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方. 你可以先看一下下面的演示: HTML代码 <img alt="Example alt text" width="200" height="200