html - 如何防止没有空格的文本元素之间出现换行符

标签 html css

我试图防止两个文本元素在 epub 文件(xhtml 和 css)中被换行符分开。

示例:

This is a line of text that reaches the end of the display and [12]what I don't want is for that superscripted part to be separated from the next word.

最终看起来像这样:

This is a line of text that reaches the end of the display and [12]
what I don't want is for that superscripted part to be separated
from the next word.

我希望它看起来像这样:

This is a line of text that reaches the end of the display and
[12]what I don't want is for that superscripted part to be
separated from the next word.

我电脑上的某些软件保留了上标<sup>[12]</sup>what在一起,但我的索尼电子书阅读器却没有。其他电子阅读器也可能这样做。我希望它始终将上标部分与下一个单词保持在一起,并避免它们之间出现换行符。

我看过很多类似的问题,但找不到任何与这个问题匹配的内容。

我更喜欢通过CSS来处理这个问题,而不是通过在整个文件中添加标签来编辑一大堆文件,这会因为每个上标部分后面的单词可以是任何单词而变得更加复杂,裁定进行简单的搜索和替换。

同样,当下一个单词是“I”或“A”或“a”或任何短的2个字母单词时,我也想扩展“保持事物在一起”位,所以像这样的句子

bla bla bla bla bla bla bla bla bla bla [35]in the simplest way imaginable.

可以通过以下任一方式换行:

bla bla bla bla bla bla bla bla bla bla [35]in the
simplest way imaginable.

bla bla bla bla bla bla bla bla bla bla
[35]in the simplest way imaginable.

但不要像这样中断:

bla bla bla bla bla bla bla bla bla bla [35]
in the simplest way imaginable.

bla bla bla bla bla bla bla bla bla bla [35]in
the simplest way imaginable.

是否有一种方法可以设置某些边距属性或其他属性,以便任何上标标签必须距右侧边距最小距离,否则它将被移动到下一行?然后,我可以设置最小距离以包含标记部分以及额外的 2 或 3 个字符宽度。

类似于 page break after : avoid;属性,但在行(而不是页面)级别工作会很棒。甚至是orphan: 5;行的类型属性可能会起作用。

我认为(并希望)我上面概述的两个问题都可以有一个相同的解决方案。

最佳答案

为了让其他尝试解决类似棘手问题的人受益,请查看可用的“特殊”空格字符。这些是我查看的维基百科页面: https://en.wikipedia.org/wiki/Space_%28punctuation%29https://en.wikipedia.org/wiki/Zero-width_joiner 如果您正在寻找比常规空间更窄的“空间”,还有“薄空间”和“毛空间”。

关于html - 如何防止没有空格的文本元素之间出现换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25616742/

相关文章:

JavaScript 从选择标签列表中删除选项(如果已选择)

javascript - HTML 代码流出页面?

ios - Apple 设备上的图像未跨越整个宽度

html - 如何避免 block 元素之间的垂直边距?

html - 双背景图像顶部和底部

html - 如何在 Blogger slider 中将图像居中?

html - 将两个做不同事情的 id 组合到一个 div 按钮

css - 我如何在圆圈中绘制底弦?

javascript - 对齐时触发动画

javascript - 放大时位置变化