html比较长的单词不自动换行,HTML+CSS 对于英文单词强制换行但不截断单词的解决办法...

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

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

通过这样一段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/

html比较长的单词不自动换行,HTML+CSS 对于英文单词强制换行但不截断单词的解决办法...相关推荐

html 破折号自动换行,HTML+CSS 对于英文单词强制换行但不截断单词的解决办法
如何处理长的单词和链接(强制换行,连接符,省略号等) 我们在前端开发中经常会遇到一些很长的文本串从它的容器中溢出,例如: 通过这样一段css可以有效解决这种问题: .dont-break-out { ...
latex 分行表格标题过长_使用latex撰写Elsevier论文，遇到的表格标题caption换行以及左对齐问题的解决办法...
使用latex撰写Elsevier论文,遇到的表格标题caption换行以及左对齐问题的解决办法 . 最近用latex书写elsevier的论文,生成表格时遇到了一个问题.一般elsevier的论文表 ...
css如何让不自动换行,css实现强制不换行/自动换行/强制换行
在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少♦ 嘻嘻...).今天我们来学习一下如何熟练的掌握用css实 ...
css input 内容换行显示,CSS - 如何实现强制不换行、自动换行、强制换行以及 chrom默认焦点 IE下 Input 默认出现叉...
*:focus {outline: none;} input::-ms-clear {display:none;} 一般的文字截断(适用于内联与块): .text-overflow { display ...
R语言ggplot2可视化为长文本轴标签自动换行美化可视化结构实战：Wrap long text axis labels
R语言ggplot2可视化为长文本轴标签自动换行美化可视化结构实战:Wrap long text axis labels 目录
python使用fpdf的multi_cell API实现长文本写入的自动换行功能实战
python使用fpdf的multi_cell API实现长文本写入的自动换行功能实战目录 python使用fpdf的multi_cell API实现长文本写入的自动换行功能实战
datatable行内内容太长，有时不自动换行解决方法
datatable行内内容太长,有时不自动换行解决方法参考文章: (1)datatable行内内容太长,有时不自动换行解决方法 (2)https://www.cnblogs.com/yang-xia ...
SyntaxHighlighter行号显示错误及代码太长无法换行解决办法
2019独角兽企业重金招聘Python工程师标准>>> SyntaxHighlighter是一个使用JavaScript编写的功能齐全的代码语法高亮的软件.如果一行代码或注释太长的话 ...
HTML文本界面英文无法自动换行的解决办法
问题: 在一个设定好宽度的div中,当我们输入的中文文字长度超过了设定宽度时,会自动换到下一行.但是,如果输入纯英文字符或数字时,此时无论你div设定宽度为多少,都是不换行且在同一行输出,实现溢出效果 ...
css如何实现自动换行、强制换行、强制不换行？
首先描述问题,今天写一个项目的时候,由于换行了,导致我的卡片都不对齐了代码很简单 <div v-for="item in distributedTestBed" :key= ...

html比较长的单词不自动换行,HTML+CSS 对于英文单词强制换行但不截断单词的解决办法...

html比较长的单词不自动换行,HTML+CSS 对于英文单词强制换行但不截断单词的解决办法...相关推荐

最新文章

热门文章