关于FF下截取后省略号的问题

今天在用到text-overflow的ellipsis属性得时候,突然发现原来FF下是没有省略号得(才发现,汗)。不想把这个问题交给后台或者用JS来做了,于是找了个折中的办法,就是:after伪类来模拟FF下的省略号。

具体做法就是给content一个…的值,然后hack解决宽度问题,这样看起来就舒服一些了。

可能有BUG或者还有更好得办法,希望兄弟们告诉一下。

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

<!--

body{

font-family: 宋体;

font-size: 12px;

color: #333333;

}

.div1{

width:200px;

}

.div1 a{

white-space:nowrap;

text-overflow:ellipsis; /* for internet explorer */

overflow:hidden;

width:168px;+width:200px;_width:200px;

display:block;

float:left;

}

html>body .div1:after{

content: "...";

margin-left:5px;

}

-->

</style></head>

<body>

<div class="div1"><a href="#">把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧把我截断吧</a></div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小叙

jquery绑定事件的坑,重复绑定问题

我实现点击table表格中的删除按钮,找到当前按钮的祖先元素tr 然后删除该行,但是我首先点击删除的时候要先弹出提示框,是否要下载,这时在点击删除按钮删除,之前...

851
来自专栏技术小黑屋

Atom订阅转成RSS2.0

Octopress博客自带的只Atom协议的订阅,但是最近提交收录网站时,需要使用RSS协议。于是利用周末简单实现了一下。

1332
来自专栏王磊的博客

水印生成器第2版[原图质量水印可自定义设置]

简介:水印生成器,原理很简单,一时在网上没有找到打水印的网站,自己便做了一个,效果如下图,可自定义字体大小、字体类型以及颜色。 开发环境:vs 2010 [ne...

3609
来自专栏全栈之路

css 关于图片上显示文字

图片上显示文字,现在有很多主流的方法,最常用的就是position设置为relative或者absolute。

1555
来自专栏前端菜鸟变老鸟

ElementUI的DatePicker多个日期选择器默认没有选中样式的问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caomage/article/details/835...

1924
来自专栏前端儿

教你如何在React及Redux项目中进行服务端渲染

使用 redux-saga 处理异步action,使用 express 处理页面渲染

2341
来自专栏GuZhenYin

C#使用Xamarin开发可移植移动应用(5.进阶篇显示弹出窗口与通讯中心)附源码

前言 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 没啥好说的.开干吧. 今天...

2125
来自专栏猛牛哥的博客

API获取窗口滚动条位置

1043
来自专栏技术博客

ExtJs七(ExtJs Mvc创建ViewPort)

在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的。而在4.1.1,则可直接调用app...

934
来自专栏破晓之歌

Vue周期 原

1.Vue实例的生命周期全过程(图):http://www.mamicode.com/info-detail-1908811.html

852

扫码关注云+社区