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

时间:2014-09-02 05:56:20

标签: html css

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

示例:

  

这是一行到达显示结尾的文本, [12] 我不想要的是将上标部分与下一个单词分开。

最终看起来像这样:

  

这是到达显示结尾的文本行和 [12]
  我不想要的是将上标部分分开   从下一个词开始。

我希望它看起来像这样:

  

这是到达显示结尾的文本行和
   [12] 我不想要的是那个上标部分是   与下一个单词分开。

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

我查看了很多类似的问题,但无法找到符合此问题的任何内容。

我更喜欢通过css处理这个问题,而不是通过在整个文件中添加标签来编辑一组huuuuuge文件,由于每个上标部分之后的单词可以是任何单词,这将进一步复杂化排除了简单的搜索和替换。

同样地,我也希望扩展&#34;将事物保持在一起&#34;当下一个单词是&#34;我&#34;或&#34; A&#34;或&#34; a&#34;或任何短的2个字母的单词,所以像

这样的句子
  以最简单的方式可以想象出来。

bla bla bla bla bla bla bla bla bla bla bla [bla] [35] 。

会以这两种方式中断:

  

bla bla bla bla bla bla bla bla bla [35] in   最容易想象的方式。

     bla bla bla bla bla bla bla bla bla bla    [35] 以最简单的方式可以想象。

但不要打破:

  bla bla bla bla bla bla bla bla bla bla [35]
  以最简单的方式想象。

     b。bla bla bla bla bla bla bla bla bla [35] in   最简单的方法。

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

类似page break after : avoid;属性的东西,但在线(非页面)级别工作会很棒。或者甚至行的orphan: 5;类型属性也可以起作用。

我正在思考(并希望)上面列出的问题都可以有一个相同的解决方案。

2 个答案:

答案 0 :(得分:1)

没有CSS解决方案不需要更改标记或内容。原因是没有将CSS样式附加到的元素。 CSS没有可以控制换行行为的属性,具体取决于内容中的字符(例如“不要破坏'''字符”);也许有一天会这样。

prevent line breaks有几种方法,例如非标准但得到良好支持的nobr元素,CSS设置white-space: nowrap(设置在自动换行的元素上)禁用),以及特殊字符零宽度不间断空间(ZWNBSP)。虽然所有这些在现代Web浏览器中通常都能很好地工作,但它们在电子书阅读器中存在问题。您需要分析哪些用户代理是重要的,并测试它们的各种方法。请注意,ZWNSP在不受支持的意义上是不安全的(在某些电子书阅读器和非常旧的Web浏览器中),它会产生比正在解决的问题更严重的问题(显示奇怪的符号)。其他方法可能会失败,但只是在没有任何影响的意义上。

选择方法后,考虑是否可以使用客户端JavaScript实现,即在页面加载后运行的代码,并且可以修改文档树,例如通过插入新元素。例如,如果问题是使用括号表达式而不使用括号,则代码可以在结束括号后插入一个特殊字符,或者识别下一个单词并将括号和单词包装在元素中。

答案 1 :(得分:1)

为了其他人试图解决类似的粘性问题,请查看可用的&#34;特殊&#34;空格字符。这些是我检查过的维基百科上的页面: https://en.wikipedia.org/wiki/Space_%28punctuation%29https://en.wikipedia.org/wiki/Zero-width_joiner 还有&#34; thinspace&#34;以及&#34; hairspace&#34;,以防你正在寻找&#34;空间&#34;它的尺寸比常规空间窄。