如果你遇到长串英文单词或者url换行的问题，这时候就需要用到word-wrap与word-break这2个css属性啦。

word-wrap:break-word;长单词与url地址自动换行。

word-break:break-all;文本强制换行。

word-wrap:break-word;

比较温和，如果英文单词过长时，它会先尝试把整个单词挪到下一行，如果下一行还是过长(单词长度已经超过了容器)，这时它才会进行单词内的断句。

看截图所示：

word-break:break-all;则是简单粗暴的直接强制单词内的断句

word-wrap与word-break为长单词换行的更多相关文章

  1. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

  2. [LeetCode] Longest Word in Dictionary 字典中的最长单词

    Given a list of strings words representing an English Dictionary, find the longest word in words tha ...

  3. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

  4. 【LeetCode】211. Add and Search Word - Data structure design 添加与搜索单词 - 数据结构设计

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛 本文关键词:Leetcode, 力扣,211,搜索单词,前缀树,字典树 ...

  5. [LeetCode] Add and Search Word - Data structure design 添加和查找单词-数据结构设计

    Design a data structure that supports the following two operations: void addWord(word) bool search(w ...

  6. 211 Add and Search Word - Data structure design 添加与搜索单词 - 数据结构设计

    设计一个支持以下两个操作的数据结构:void addWord(word)bool search(word)search(word) 可以搜索文字或正则表达式字符串,字符串只包含字母 . 或 a-z . ...

  7. Leetcode211. Add and Search Word - Data structure design 添加与搜索单词 - 数据结构设计

    设计一个支持以下两种操作的数据结构: void addWord(word) bool search(word) search(word) 可以搜索文字或正则表达式字符串,字符串只包含字母 . 或 a- ...

  8. [LeetCode] 211. Add and Search Word - Data structure design 添加和查找单词-数据结构设计

    Design a data structure that supports the following two operations: void addWord(word) bool search(w ...

  9. 英文长单词断行 word-break VS word-wrap

    你真的了解word-wrap和word-break的区别吗? 这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:brea ...

随机推荐

  1. Does Hadoop require SSH?

    https://wiki.apache.org/hadoop/FAQ#Does_Hadoop_require_SSH.3F Hadoop provided scripts (e.g., start-m ...

  2. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  3. 使用proc接口例子【转】

    本文转载自:http://blog.csdn.net/mike8825/article/details/52434666 版权声明:本文为博主原创文章,未经博主允许不得转载. 在上一篇的使用sys接口 ...

  4. ADB运行框架原理解析【转】

    本文转载自:http://blog.csdn.net/wlwl0071986/article/details/50935496 一.adb守护进程的初始化 源码路径:~/system/core/adb ...

  5. vue中显示和隐藏导航

    const router = new VueRouter({ mode: 'history', routes: [ { path: '/first', component: firstView, me ...

  6. 探讨Ajax中有关readyState（状态值）和status（状态码)的问题

    先看下面一段代码,然后给大家详细介绍,Ajax中有关readyState(状态值)和status(状态码)的问题,具体内容如下所示: var getXmlHttpRequest = function ...

  7. kafka条件查询excel拼接

    1 SELECT COUNT(*) FROM wiseweb_crawler_metasearch_page20171214 WHERE (content like '%内蒙古%'or content ...

  8. 一步一步学Silverlight 2系列（9）：使用控件模板

    述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  9. 一步一步学Silverlight 2系列（8）：使用样式封装控件观感

    述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  10. 使用TextView实现跑马灯的效果

    1.定义textView标签的4个属性: android:singleLine="true"//使其只能单行 android:ellipsize="marquee&quo ...