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

相关文章

来自专栏积累沉淀

Python快速学习第十天

11.1 打开文件 open函数用来打开文件,语法如下: open(name[, mode[, buffering]]) open函数使用一个文件名作为唯...

1776
来自专栏Java3y

SpringMVC【参数绑定、数据回显、文件上传】

前言 本文主要讲解的知识点如下: 参数绑定 数据回显 文件上传 参数绑定 我们在Controller使用方法参数接收值,就是把web端的值给接收到Control...

38510
来自专栏机器学习从入门到成神

Vue.js之组件及其易错点

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

511
来自专栏康怀帅的专栏

PHP 日期相关函数

设置时区 date_default_timezone_get(); date_default_timezone_set('PRC'); 时间戳 time();...

2824
来自专栏青枫的专栏

day08_Servlet学习笔记

============================================================

401
来自专栏程序员的碎碎念

php常用函数(一)

parse_url:函数的作用是解析一个URL并返回一个包含其URL组件的关联数组,错误时返回false。例: ? 页面显示效果如下: ? ran...

3264
来自专栏SpringBoot

一个密码复杂度的验证js

在项目开发中,要求密码进行复杂度限制,现帖出来跟大家做个分享。 密码复杂要求:1、长度大于8          2、密码必须是字母大写,字母小写,数字,特殊...

853
来自专栏Golang语言社区

厚土Go学习笔记 | 26. 函数闭包

如果非必要,尽量不要在程序中使用闭包。 go函数可以是一个闭包。闭包是一个函数值,它引用了函数体之外的变量。这个函数可以对这个变量进行访问和赋值。 展示一个例子...

34913
来自专栏Redis

Redis数据类型之hashes类型

2、hsetnx 设置hash field为指定值,如果key不存在,则先创建。如果field已经存在,返回0,nx是not exist的意思。

930
来自专栏我的博客

坑爹的BOM

场景:开发小程序使用wx.request请求数据时提示Cannot read property of ‘xxxx’ undefined…….. ...

30410

扫码关注云+社区