`

使用CSS处理长字符串

阅读更多

长字符串的换行显示

对中文而言,长字符串不是问题,浏览器本身可以正确的换行,但对于英文字符而言,就可能会突破容器的宽度,影响美观。解决方法并不难,不过要考虑到IE和Firefox的兼容问题:

<div style="width: 100px; height: 100px; border:1px solid #000000; word-wrap:break-word; overflow:hidden;">
    abcdefghijklmnopqrstuvwxyz
</div>

IE会根据word-wrap的设置正确的换行,Firefox虽然不识别word-wrap,但是会按照overflow的设置做一个权宜的处理。

在针对IE的方案中,注意尽可能使用word-wrap,而不是word-break,这是因为word-break不会处理连续的英文标点符号。

长字符串的省略显示

有的时候,在处理长字符串的时候,必须保持单行,这时只能隐藏多余的部分,并在结尾加上省略号:

<div style="width: 100px; white-space:nowrap; overflow: hidden; text-overflow:ellipsis;">
    one world. one dream.
</div>

IE下一切正常,但是在Firefox下,不支持text-overflow属性,只能简单的隐藏字符串多余的部分。


对Firefox而言,不管是word-wrap:break-word,还是text-overflow:ellipsis,都不支持。简单的解决方案,差不多都是使用overflow:hidden隐藏一下,复杂的解决方案,有很多Hack类的方法,这里就不累述了

分享到:
评论

相关推荐

    前端面试题大全:涉及内容涵盖html、css、JS、TS、vue、angular、webpackvite、设计模式等

    ES6(ECMAScript 2015)及以后的版本引入了类、箭头函数、模板字符串等新特性。面试题可能包括原型链、闭包、异步编程(Promise、async/await)、事件循环、作用域和作用域链等。 **TypeScript(TS)** TypeScript...

    石家庄天远科技集团有限公司—Java开发笔试题

    `String`、`StringBuffer`和`StringBuilder`都是用来处理字符串的类,但它们有不同的性能特点。`String`是不可变的,每次修改都会创建新的对象,适合少量字符串操作。`StringBuffer`和`StringBuilder`是线程安全和非...

    JavaScript王者归来part.1 总数2

     9.4 字符串与文本处理--JavaScript棋谱阅读器(一)   9.4.1 需求分析--什么是棋谱和棋谱阅读器   9.4.2 系统设计--棋谱和棋盘数据的字符串描述   9.4.3 系统实现--解析和处理棋谱   9.4.4 完整的棋谱阅读...

    WEB前端开发初级教案.pdf

    2. 字符串的方法:讲解了字符串相关的各种方法,如concat、slice、replace、search等。 第六章 正则表达式: 1. 基本概念:介绍了正则表达式的定义和基本组成部分。 2. 创建正则表达式:详细说明了正则表达式的语法...

    经典的Java面试题,内容全面,入职的帮手

    1. 字符串统计:这是一个关于字符计数的问题,需要理解Java中的字符串操作,如遍历、计数以及排序。可以使用HashMap来存储每个字母出现的次数,然后按降序排列输出。 2. 打印正三角形:这涉及到循环和条件判断,...

    Web的桌面系统框架TianOX.zip

    TianOX是一个基于Web的桌面系统框架,目标是为类似BeagleBone的没有... 函数、数组、字符串、日期、二进制数据等工具库 一个GNSS接收机的应用例子:http://101.231.67.86:8501/。 标签:TianOX GUI开发框架

    java公司面试题

    - **在一个字符串中搜索指定字符串,返回发现指定的字符的位置**:使用`INSTR()`函数。 - **取子字符串**:使用`SUBSTR()`函数。 - **得到系统的当前日期**:使用`SYSDATE`函数。 - **将字符串转化为Oracle中的一个...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例112 解决用substr()函数对中文字符串截取时出现乱码的问题 143 实例113 字符串与HTML标记相互转换 144 实例114 运用PHP 5.0新型字符串输出XML数据 145 实例115 判断字符串中是否存在指定子串 146 2.9 正则表达式...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例112 解决用substr()函数对中文字符串截取时出现乱码的问题 143 实例113 字符串与HTML标记相互转换 144 实例114 运用PHP 5.0新型字符串输出XML数据 145 实例115 判断字符串中是否存在指定子串 146 2.9 正则表达式...

    JavaScript前端PPT课件1-8章

    这一章还会详细阐述JavaScript的基本语法,如变量声明(var、let、const)、数据类型(字符串、数字、布尔、null、undefined、对象、数组)以及基本操作符(算术、比较、逻辑)。 第2章深入到控制流程,讲解条件...

    自己写的一些东西,包含java工具类,js插件类,小游戏等等。.zip

    这些工具类可能包括字符串处理、日期时间操作、集合操作、IO流处理、数学计算等多个方面的功能。在Java中,良好的工具类设计遵循单一职责原则,每个方法只处理一种特定的任务,使得代码更易于理解和测试。此外,这些...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    11.2.3 使用特定查询字符串参数的缓存 11.2.4 自定义缓存控制 11.2.5 使用HttpCachePolicy类进行缓存 11.2.6 缓存后替换和部分页缓存 11.2.7 缓存用户配置 11.2.8 缓存配置 11.2.9 输出缓存扩展 11.3...

    javaScript300例

    6. **正则表达式**:用于字符串匹配和验证的模式,学习如何创建和使用正则表达式。 7. **原型和继承**:JavaScript的面向对象特性,包括对象的原型链、构造函数、`prototype`属性、`__proto__`以及`Object.create()...

    ASP.NET4高级程序设计(第4版) 3/3

    11.2.3 使用特定查询字符串参数的缓存 363 11.2.4 自定义缓存控制 364 11.2.5 使用HttpCachePolicy类进行缓存 365 11.2.6 缓存后替换和部分页缓存 365 11.2.7 缓存用户配置 367 11.2.8 缓存配置 368 ...

    java面试题广州

    2. **字符串反转算法**:字符串反转可以通过循环或递归实现,例如,使用双指针从两端向中间移动,交换对应位置的字符,直到两指针相遇。 3. **千分位格式化**:将数字转换为含千分隔符的字符串,可以通过正则表达式...

    2022第1轮作业题(基础+高阶)(1).rar

    4. **字符串处理**:字符串的创建、操作(如拼接、截取、查找子串、替换等)以及正则表达式的使用。 5. **文件操作**:如何打开、读取、写入和关闭文件,熟悉常见的文件模式(如'r'、'w'、'a'等)。 6. **错误与...

Global site tag (gtag.js) - Google Analytics