关于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 条评论
登录 后参与评论

相关文章

来自专栏数据结构笔记

Django搭建博客(九):为博客添加代码高亮显示和 md文档支持

特别需要注意的是:代码块必须使用三个 '`' 符号包裹起来才能正确识别,语言标记可有可无,但是三个 '`' 必须单独成行。

673
来自专栏全沾开发(huā)

FlowType简易入门指北

FlowType简易入门指北 写了一段时间JavaScript了,作为一个弱类型语言,无视类型判断在开发过程中带来了很多的好处,in...

4196
来自专栏飞雪无情的博客

Android注解支持(Support Annotations)

原文地址 http://tools.android.com/tech-docs/support-annotations

783
来自专栏互联网杂技

express中app.use和app.get的区别及解析

写在前面:最近研究nodejs及其web框架express,对app.use和app.get没理解清,以致踩了坑浪费不少时间,我根据自己实践及总结出此博客,若有...

3416
来自专栏小特工作室

基于Lodop控件的Web打印示例(含源码)

      最近项目组的打印控件有所改变,已经换成Lodop控件,使用以后发现,功能确实非常强大.可以打印Web页面内某个控件的内容.下面,还是通过一个实例来说...

1868
来自专栏码匠的流水账

dubbo-spring-boot-starter小试牛刀

dubbo-spring-boot-starter的官方文档貌似比较粗糙,比较不符合spring boot开源项目的风格,也没有看到example工程,实践起来...

591
来自专栏java思维导图

mybatis-plus思维导图,让mybatis-plus不再难懂

 Mybatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果...

81817
来自专栏小古哥的博客园

常用表单验证插件

插件地址:https://github.com/gavin125/gavin-Vtype 主要用正则的方式匹配输入内容的格式 ? 分为两个版本: 1、Vtype...

2784
来自专栏琯琯博客

Yii2 学习笔记之验证规则

3206
来自专栏十月梦想

ES6数据传递的传值和传址

看一下上面一段代码,通过正常的理解确实这个样子,但是下面的代码我们只改变了test.y值而obj的也随之改变!这个样子是用于前一部分是传值,后面是传地址!   ...

1024

扫码关注云+社区