如何处理长的单词和链接(强制换行,连接符,省略号等)

我们在前端开发中经常会遇到一些很长的文本串从它的容器中溢出，例如：

通过这样一段css可以有效解决这种问题:

.dont-break-out {

/* 这两个在技术上是一样的, 为了兼容了浏览器两个都加上 */

overflow-wrap: break-word;

word-wrap: break-word;

-ms-word-break: break-all;

/* 这个的使用在web-kit中有些危险，他可能会阶段所有东西 */

word-break: break-all;

/* Instead use this non-standard one: */

word-break: break-word;

/* 如果浏览器支持的话增加一个连接符(Blink不支持) */

-ms-hyphens: auto;

-moz-hyphens: auto;

-webkit-hyphens: auto;

hyphens: auto;

}

使用后的效果：

解释：

1.overflow-wrap:break-word; 用于确保字符串将会被它的上一层容器包围住而不溢出。它跟word-wrap实现的功能看起来没啥两样，就像这篇文章上面所说,他们只是字面上的区别而已。

一些浏览器只支持其中的一个。Firefox(v43版上测试)只支持word-wrap。Blink(Chrome v45上测试)引擎则两者都支持。

2.overflow-wrap的使用全靠自己即可,单词将可能在任何地方被强制换行。加入有一个“可接受换行”的字符(例如破折号)出现，它将会在那里换行，否则它将只是做它自己该做的事。

3.除此之外，你还可以加上hyphens,因为如果浏览器支持的话，它将优雅地在换行的地方加上连接符(目前Blink还不支持，但Firefox支持)。

4.word-break:break-all 则是在告诉浏览器可以在任何需要的地方截断掉单词，及时它本来就是在做这件事，所以我不确定在什么情况下它是100%必须的

转自:

https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

CSS控制Span强制换行、溢出隐藏

CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...

CSS样式自动换行(强制换行)与强制不换行

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

css样式自动换行/强制换行

写样式时遇到的英文字符超出容器问题,度娘后了解下列知识,与大家分享,同时以便自己日后回顾. 一.自动换行问题 正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大. 下面介绍的是CSS如何 ...

CSS 中的强制换行和禁止换行

强制换行       1.word-break: break-all;       只对英文起作用,以字母作为换行依据.       2.word-wrap: break-word;   只对英文起作 ...

css控制div强制换行

div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-br ...

CSS控制Span强制换行亲测

span { word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; }

CSS:在IE浏览器下，元素下沉一行的解决办法

HTML:

• 嘻嘻嘻嘻嘻嘻2015-12-17

  CSS背景100%平铺 浏览器缩小背景显示不全解决办法

  本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  flex布局下，css设置文本不换行时，省略号不显示的解决办法

  大致是有一个main容器是flex布局,左边一个logo固定宽高,右边content动态宽度.

  随机推荐

  SQL Server 表变量和临时表的区别

  SQL Server 表变量和临时表的区别 一.表变量 表变量在SQL Server 2000中首次被引入.表变量的具体定义包括列定义,列名,数据类型和约束.而在表变量中可以使用的约束包括主键约束,唯 ...

  BZOJ1075 : [SCOI2007]最优驾车drive

  设$f[i][j][k]$为到达$(i,j)$,用时为$\frac{k}{5lcm}$小时的最低耗油量,然后DP即可. #include const int N=12,M= ...

  rbenv安装ruby2.3.0在线安装不上。老子出绝招了(更新)

  今天把系统换成Linux mint了.感觉比ubuntu的好用太多,细节真是不错,Ubuntu感觉就是毛坯房,Linux mint真是精装修啊 问题来了.安装rbenv后,然后安装rbenv-buil ...

  poj 3604 Professor Ben

  质因数分解:牛人推导公式(1^3+2^3+……+(1+a1)^3)*……*(1^3+2^3+……+(1+ai)^3)…… 链接http://poj.org/problem?id=3604 #inclu ...

  Android中Service类onStartCommand

  Android开发的过程中,每次调用startService(Intent)的时候,都会调用该Service对象的onStartCommand(Intent,int,int)方法,然后在onStart ...

  Juqery遮罩插件

  Juqery遮罩插件,想罩哪就罩哪!   一  前言 在项目开发时发现没有一个用起来 爽一点的遮罩插件,看起来觉得不难 好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下, 需要的功能 ...

  防御xss 大致理解

  前端 发送留言内容 包含 js 代码 后台 管理员 查看 留言 代码被执行 拿到cookie 成功登陆 解决办法 对录入 进行相关的过滤处理 其他解决方法 正在学习中

  EXCEL查找函数之VLOOKUP,LOOKUP,HLOOKUP

  VLOOKUP是纵向查询函数,VLOOKUP(lookup_value,table_array,col_index_num,range_lookup). 参数                      ...

  alert()、confirm()、prompt()的区别

  使用消息框 使用警告.提示和确认 可以使用警告.确认和提示消息框来获得用户的输入.这些消息框是 window 对象的接口方法.由于 window 对象位于对象层次的顶层,因此实际应用中不必使用这些消息 ...