如何在CSS中换行或拆分已经包含多个连字符的单词？

在CSS中，可以使用word-break属性来控制长单词的换行或拆分。word-break属性有以下几个取值：

normal：默认值，单词不会被拆分或换行。
break-all：单词会被拆分到下一行，即使没有连字符。
keep-all：只有在有连字符的情况下才会换行。

如果要在已经包含多个连字符的单词中换行或拆分，可以将word-break属性设置为break-all。例如：

.word-break-example {
  word-break: break-all;
}

这样，如果一个单词包含多个连字符，CSS会将其拆分到下一行显示。请注意，这可能会破坏单词的连贯性，因此需要谨慎使用。

腾讯云相关产品和产品介绍链接地址：

相关·内容

【CSS】419- 彻底搞懂word-break、word-wrap、white-space

句子超过一行后会自动换行，而长度超过一行的单个单词会超出边界。接下来我们看下，给它上面三个css属性赋值后会出现什么变化。...不仅空格被合并，换行符无效，连原本的自动换行都没了！只有才能导致换行！所以这个值的表现还是挺简单的，我们可以理解为永不换行。 white-space: pre ?...所有“单词”一律不拆分换行，注意，我这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为只有空格可以触发自动换行。 word-break: break-all ?...所有单词碰到边界一律拆分换行，不管你是incomprehensibilities这样一行都显示不下的单词，还是long这样很短的单词，只要碰到边界，都会被强制拆分换行。...现在的文本规范草案中已经被重名为 overflow-wrap 。

3K1 0

CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

而inline-level box必须包含在line box中，若inline-level box的`white-space:nowrap或pre外的其他值`时，就会将inline-level box拆分为多个...word-wrap normal: 只在允许的断字点换行 break-word: 在长单词或URL地址内部进行换行 word-break normal:依照亚洲和非亚洲语言的文本规则...英语单词移行有一定规则,归纳如下： 1．移行处要用连字符号“-”,只占一个印刷符号的位置并放在该行的最后. 2．移行时一般按照音节进行,故只可在两音节之间分开,不能把一个完整的音节分写在上下两行.例如：...Octo-ber（正）,Octob-er（误）. 3．复合词要在构成该词的两部分之间移行.如：some-thing,bed-room等. 4．如果复合词原来就有连字符号,则就在原连字符号处分行.如：good-looking...CSS简化了上述的规则，若需要换行处恰好是一个复合词，就在原连字符号处分行；其它情况则整个单词移到下一行。因此使用 word-wrap:break-word; 就OK了。

1K7 0

使用css3属性处理单词的换行和断词

默认情况下,连续的单词如果在一行容纳不下的话会在空格和连字符处换行，那如何让它换行呢?...认识word-break属性属性值解释 normal 使用浏览器默认的换行规则(默认) break-all 允许在单词内换行 keep-all 只能在半角空格或连字符处换行现在大多说的浏览器默认的换行规则为半角空格和连字符...word-break: break-all，打破了默认的换行规则。那如果想保留空格和连字符处换行怎么办？...默认情况下,图上标号2和4是连续长单词，中间没有空格和连字符，所以没有换行(溢出)。...从图上看,保留了空格和连字符的换行状态。只是将前面图上标号2和4行的长单词进行了换行。

1K3 0

CSS3文本与字体

一、CSS3 换行 1、word-break（规定自动换行的处理方法） word-break: normal / break-all / keep-all; /* normal：使用浏览器默认的换行规则...break-all：允许在单词内换行 keep-all：只能在半角空格或连字符处换行 */ 兼容性：IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+ 2、word-wrap...（允许长单词或 URL 地址换行到下一行） word-wrap: normal / break-word; /* normal：只在允许的断字点换行（浏览器保持默认处理） break-word：在长单词或...元素中的font-family source：自定义的字体的存放路径，可以是相对路径也可以是绝路径 format：自定义字体的格式，主要用来帮助浏览器识别 weight：定义字体是否为粗体 style：...定义字体样式，如斜体 */ 兼容性：IE9+、FireFox3.5+、Chrome4+、Safari3.2+、Opera10+ 2、CSS3 @font-face的字体格式 TureTpe (.ttf

1.3K3 0

css自动换行属性与保留空白属性冲突_css换行样式

keep-all 只能在半角空格或连字符处换行。 word-break:break-all 所有的都换行，右侧换行没有空隙。 word-wrap 属性允许长单词或 URL 地址换行到下一行。...语法： word-wrap: normal | break-word ; normal 只在允许的断字点换行（浏览器保持默认处理）。 break-word 在长单词或 URL 地址内部进行换行。...word-wrap:break-word 如果这一行文字有可以换行的点，如空格、单词或字符，让这些换行点换行，这种换行会出现不对齐，右侧空白的情况。...说明： CSS3中将改名为；浏览器支持情况：Chrome（23.0+）、Safari（6.1+）、Opera（15.0+）、iOS...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.8K3 0

在Word中使用通配符查询

^~不间断连字符^~20¶段落符号^%表达式( )21§分节符^单词结尾 23可选连字符^-任意字符串*24空白区域^w指定范围外任意单个字符[!...2、任意多个字符： “*”可以代表任意多个字符。如：输入“*国”就可以找到“中国”、“美国”、 “孟加拉国”等字符。...6、指定前一字符的个数： “{n}”可以用来指定要查找的字符中包含前一字符的个数，如：输入“cho{1} se”就是说包含1个前一字符“o”，可以找到“chose”，输入“cho{2}se”就是说包含...8、一个以上的前一字符： “@”可以用来指定要查找字符中包含一个以上的前一字符，如：输入“cho@se”，就可以找到， “chose”、“choose”等字符。...最后还要注意如果要查找已经被定义为通配符的字符，如“*”、“?”等字符，必须在该字符前面加上反斜杠“\”，如：输入“\*”则表示查找字符“*”。

2.4K1 0

CSS高级技巧

这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情 >> # CSS知识框架 CSS知识框架 CSS高级技巧鼠标样式：cursor 定义:cursor : default 小白...| pointer 小手 | move 移动 | text 文本轮廓： outline 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。...溢出 word-break:自动换行 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。...keep-all 只能在半角空格或连字符处换行 text-overflow 文字溢出 ellipsis : 当对象内文本溢出时显示省略标记（...） clip : 不显示省略标记（...）...demo 元素包含着h3。 5.属性选择器: div[class^=font] E::first-letter文本的第一个单词或字（如中文、日文、韩文等） 2.

4455 0

css实现强制不换行自动换行强制换行

} 强制英文单词断行 div{ word-break:break-all; } word-wrap: css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象...word-break: css的 word-break 属性用来标明怎么样进行单词内的断句。定义和用法 word-break 属性规定自动换行的处理方法。...提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。...break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。定义和用法 word-wrap 属性允许长单词或 URL 地址换行到下一行。...break-word 在长单词或 URL 地址内部进行换行。 CSS 参考手册

7.3K8 0

Google Java编程风格规范(2020年4月原版翻译)

2.3 特殊字符 2.3.1 空白字符除了行结束符序列，ASCII水平空格字符(0×20，即空格)是源文件中唯一允许出现的空白字符，这意味着：所有其它字符串中的空白字符都要进行转义。...3.4.2.1 重载：永远不要拆分当一个类有多个构造函数，或是多个同名方法，这些函数/方法应该按顺序出现在一起，中间不要放进其它函数/方法。...4.8.4 switch语句术语说明：switch块的大括号内是一个或多个语句组。每个语句组包含一个或多个switch标签(case FOO:或default:)，后面跟着一条或多条语句。...把这个结果切分成单词，在空格或其它标点符号(通常是连字符)处分割开。推荐：如果某个单词已经有了常用的驼峰表示形式，按它的组成将它分割开(如”AdWords”将分割成”ad words”)。...Note：在英语中，某些带有连字符的单词形式不唯一。例如：”nonempty”和”non-empty”都是正确的，因此方法名checkNonempty和checkNonEmpty也都是正确的。

1.1K2 0

CSS中，如何处理短内容和长内容？

在许多情况下，添加或删除一个单词会改变 UI 的外观，更糟的是，它可能会破坏原有的设计，使其无法访问。在我学习 CSS 的早期，我低估了添加或删除一个单词的作用。...在本文中，我会介绍几种不同的技巧，智米们可以马上使用它们来处理CSS中不同长度的文本。问题在讨论处理文本内容的技巧之前，先来解释一下这个问题，假设我们有一个垂直导航。...如果是，最多可以换行多少行？这种情况下单词比预期的多，但是当单词太长时会发生什么呢?默认情况下，它将溢出其容器。...overflow-wrap CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。...image.png Hyphens CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。

1.8K4 0

《精通CSS》第4章网页排版

内容区并不会完全限制字符的显示，比如某些字体中g就会超出内容区。最后，如果行盒子内有多个行高不等的行内盒子，则行盒子最后的高度至少等于最高的。...4.1.11 连字符如果又想解决毛边问题，又不想出现串流问题。我们可以在 HTML 中手动插入连字符的实体符号。只有当浏览器需要断词换行是才会显示这个连字符。...我们可以通过@font-face规则来声明自定义的字体。它可以指定浏览器下载字体的地址以及如何在样式表中引用字体。...在有些 OpenType 字体格式中支持在字体文件中包含字体的额外设定和特性，包括连字（ligature，由字符组合而成的特殊字形，如“ﬁ”或“ﬄ” ），字距（kerning，调整特定字母组合的间距），...如果特性只有开关两个状态，则 1 为开启；如果有多个状态，则根据字体来选择对应的数字。多个特性之间用逗号隔开。不同浏览器的浏览器可能需要加前缀（这个不用手动加，建议使用 CSS 预处理器）。

1.4K2 0

R语言︱文本（字符串）处理与正则表达式

一些特殊的字符在正则表达式中不在用来描述它自身，它们在正则表达式中已经被“转义”，这些字符称为“元字符”。...perl类型的正则表达式中被转义的字符有：. \ | ( ) [ ] { } ^ $ * + ?。被转义的字符已经有特殊的意义，如点号 ....不同语言或应用程序（事实上很多规则都通用）定义了一些特殊的元字符用于表示某类字符，如 \d 表示数字0-9， \D 表示非数字， \s 表示空白字符（包括空格、制表符、换行符等）， \S 表示非空白字符...匹配所包含的任意一个字符。例如，“[abc]”可以匹配“plain”中的“a”。 [^xyz] 负值字符集合。匹配未包含的任意字符。例如，“[^abc]”可以匹配“plain”中的“plin”。...注意：这个元字符不是所有的软件都支持的。 + 匹配1或多个正好在它之前的那个字符。例如正则表达式9+匹配9、99、999等。注意：这个元字符不是所有的软件都支持的。 ?

4.2K2 0

这可能是迄今为止最好的一篇正则入门教程-上

字符是计算机软件处理文字时最基本的单位，可能是字母，数字，标点符号，空格，换行符，汉字等等。字符串是0个或更多个字符的序列。文本也就是文字，字符串。...虽然通常英文的单词是由空格，标点符号或者换行来分隔的，但是 \b 并不匹配这些单词分隔字符中的任何一个，它只匹配一个位置。假如你要找的是hi后面不远处跟着一个Lucy，你应该用 \bhi\b.....* 连在一起就意味着任意数量的不包含换行的字符。现在 \bhi\b.*\bLucy\b 的意思就很明显了：先是一个单词hi,然后是任意个任意字符(但不能是换行)，最后是Lucy这个单词。...下面是Regester运行时的截图： ? 元字符现在你已经知道几个很有用的元字符了，如 \b, . , * ，还有 \d....这里的匹配是指是字符串里有没有符合表达式规则的部分。如果不使用^和$的话，对于\d{5,12}而言，使用这样的方法就只能保证字符串里包含5到12连续位数字，而不是整个字符串就是5到12位数字。

9251 0

非样式布局

看浏览器所在主机中有没有fallback指定的这些字体中的一个。 fallback并不是针对整个body元素的，而是对每个字符都会采用fallback机制。...* 网络字体，自定义字体引用网络上的字体或引用本地的字体 * iconfont 用一系列的图片代替具体的一系列的字符(也就是一套字体) 具体的某套字体的名称，用双引号括起来。...font-family: IF; } 先获取远程css，远程css中已经包含了字体的定义，然后直接引用 css中包含的字体。...- 是否保留单词：当行尾的单词很长时，如果保留单词(单词不换行进行显示)，不保留(单词打断换行进行显示) * word-break 针对多字节文字(把单词看做一个单位，还是把字母看作一个单位)...图标字体：把图标做成文字，给他定义成特别的字体，在需要使用的地方引入该字体。 * base64的使用把图片变成文本的一种方式，然后把base64字符串内嵌到css中进行使用。

1.8K2 0

CSS3选择器 | 每个前端开发者必须要掌握的技术

结构性伪类选择器 css中已经定义好的选择器，不能随便起名字选择符含义 :root 将样式绑定到页面的根元素中 :not 排除某个选择器样式 :empty 使用该选择器来制定当元素内容为空白时使用的样式...#f66,40px 35px #f00,70px 60px #000; b)自动换行： word-break normal ：使用浏览器默认换行规则 keep-all：只能在半角空格或连接字符处换行...break-all：允许在单词内换行（对于标点符号来说，允许标点符号位于行首，不过在IE中是不可以的） c)word-wrap：让长单词与URL地址自动换行 normal：只在允许的断字点换行...（浏览器保持默认处理） break-word：属性允许长单词或 URL 地址换行到下一行。...如出现文本，则相当于文本不换行 min-content:内部元素最小宽度值最大的那个元素的宽度=最终容器的宽度注意：以上属性值需要加前缀 ---- 补充： calc函数：此CSS函数让你在声明

7121 0

CSS入门笔记－初识CSS

3 - CSS语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器：指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成红色，而其他的元素（如ol）不会受到影响...3 属性和值选择器 - 多个值下面的例子为包含指定值的 title 属性的所有元素设置样式。...适用于由连字符分隔的属性值： [lang|=en] { color:red; } 4 设置表单的样式属性选择器在为不带有 class 或 id 的表单设置样式时特别有用： input[type="text...word-wrap: normal | break-word 注意：允许长单词自动换行。...word-break: normal | break-all | keep-all 注意：break-all 单词中的任意字母间都可以换行。

1.9K6 0

Bash脚本编程之引用

引用的意思是用引号括起一个字符串，以保护字符串中的特殊字符不被shell或shell脚本重新解释或扩展： # 在通配和正则模式中拥有特殊含义的*号在引用中失去了特殊意义 bash$ ls -l [Vv...539 Apr 14 17:11 viewdata.sh bash$ ls -l '[Vv]*' ls: [Vv]*: No such file or directory 但某些程序会重新解释或扩展引号括起的字符串中的特殊字符...使用双引号可以防止单词拆分，用双引号括起的参数即使包含空格也将视为一个整体： List="one two three" for a in $List # 空格拆分变量为多个部分 do echo...variable2" "$variable2" "$variable2" # 以1个参数执行echo指令(2个空格) echo "$variable2 $variable2 $variable2" 只有存在单词拆分和空格字符保留的问题时...转义转义是一种引用单个字符的方法，字符前导的转义符\告诉shell解释该字符的字面含义。某些指令如echo, sed，对字符转义可能拥有相反的效果，它会触发该字符的特殊含义。

7732 0

Google Java 编程风格指南

3.1 许可证或版权信息如果一个文件包含许可证或版权信息，那么它应当被放在文件最前面。 3.2 package语句 package语句不换行，列限制(4.4节)并不适用于package语句。...4.4 列限制：80或100 一个项目可以选择一行80个字符或100个字符的列限制，除了下述例外，任何一行如果超过这个字符数限制，必须自动换行。...4.8.4 switch语句术语说明：switch块的大括号内是一个或多个语句组。每个语句组包含一个或多个switch标签( caseFOO:或 default:)，后面跟着一条或多条语句。...把这个结果切分成单词，在空格或其它标点符号(通常是连字符)处分割开。 - 推荐：如果某个单词已经有了常用的驼峰表示形式，按它的组成将它分割开(如”AdWords”将分割成”ad words”)。...Note：在英语中，某些带有连字符的单词形式不唯一。例如：”nonempty”和”non-empty”都是正确的，因此方法名 checkNonempty和 checkNonEmpty也都是正确的。

1K1 1

分享100 个鲜为人知的 CSS 技巧

连字符让文本更流畅通过允许使用 hyphens 属性自动连字符来提高文本可读性。...长单词的断字属性使用 word-break 属性可以控制不带空格的单词或字符串的长度。 .long-words { word-break: break-all; } 50....换行指定单词或字符内的换行方式，以控制换行行为，从而改进文本布局和可读性。 p { line-break: strict; } 88....字体功能设置 font-feature-settings 允许您启用或禁用字体中的 OpenType 功能，例如，连字、字距调整和样式替代。...文本导向此属性控制文本在其包含框中的方向，从而启用垂直或横向文本布局。 .vertical-text { text-orientation: sideways; } 93.

931 0

Java 编程风格军规，看这一篇就够了

9314 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云