You can use white-space: pre-wrap to preserve sequences of spaces, while still wrapping text:
<p style="white-space: pre-wrap;">Lorem ipsum. Dolor sit amet.</p>
This is not supported in IE until IE 8 in IE 8 mode, nor in Firefox until 3.0.
You could also use or for spaces one em or one en wide. I do not know how widespread support of these is, but they seem to work on the latest WebKit and Firefox on Mac OS X.
A sequence of two characters will prevent line breaks in that space; that's what means, non-breaking space. The sequence A sentence. Another. causes the to appear on the second line, indenting text slightly, which is probably undesireable. The sequence A sentence. Another. works fine, with line breaking and not adding any extra indentation, though if you use it in justified text, with the at the end of the line, it will prevent that line from being properly justified. is intended for the case of writing someone's name, like Mr. Torvalds, or an abbreviation ending with a ., in which typographical convention says that you shouldn't split it across lines in order to avoid people being confused and thinking the sentence has ended.
So, using sequences of is undesirable. Since this is a stylistic effect, I'd recommend using white-space: pre-wrap, and accepting that the style will be a bit less than ideal on platforms that don't support it.
edit: As pointed out in the comments, white-space: pre-wrap does not work with text-align: justify. However, I've tested out a sampler of different entities using BrowserShots (obnoxious ads, and somewhat flaky and slow, but it's a pretty useful service for the price, which is free). It looks like a pretty wide variety of browsers, on a pretty wide variety of platforms, support and , a few that don't still use spaces so the rendering isn't too bad, and only IE 6 on Windows 2000 actually renders them broken, as boxes. BrowserShots doesn't let me choose the exact browser/OS combos I want, so I can't choose IE 6 on XP to see if that's any different. So, that's a plausible answer as long as you can live with IE 6 on Win2K (and maybe XP) broken.
Another possible solution would be to find (or create) a font that has a kerning pair for the ". " combination of characters, to kern them more widely apart. With @font-face support in all of the major browsers at this point, including IE back to IE 5.5 (though IE uses a different format than the other browsers), using your own font is actually becoming reasonable, and falling back to the users default font if not supported would not break anything.
A final possibility might be to talk the CSS committee into adding a style feature that would allow you to specify that you want wider spacing at the end of sentences (which would be determined by a period followed by a space; acronyms and abbreviations would need an in order to avoid getting the wider space). The CSS committee is currently discussing adding more advanced typography support, so now might be a good time to start discussing such a feature.
For all you 'antiquated' and 'mono-space-only' naysayers - Read a book. Professional publishers have used a single between sentences for time immemorial, and THAT is where the monospace two-space standard came from. Learn from history instead of spouting rhetoric with no basis in fact. I have to admit, though, that an looks better in most browsers: is just too wide. What do you think of the readability of this paragraph? Stackoverflow's editor allows some HTML, and I'm using between all sentences.
isn't the correct character to use, semantically speaking. It's a non-breaking space: a space which won't be used as a line break. Perhaps use a space an a or a single , or (my personal recommendation) don't bother with the antiquated double-space style on your page.
Just wanted to throw out there that if your goal is to override the default browser whitespace implementation to provide "proper" sentence spacing, there is actually some debate as to what constitutes proper spacing. It seems that the double-space "standard" is most likely just a carryover from when typewriters used monospace fonts. Money quote:
The Bottomline: Professional
typesetters, designers, and desktop
publishers should use one space only.
Save the double spaces for
typewriting, email, term papers (if
prescribed by the style guide you are
using), or personal correspondence.
For everyone else, do whatever makes
you feel good.
Unless you have this as a strict requirement, it does not seem worth the effort to try and "fix." (I realize this is not an answer to your stated question per se, but wanted to make sure that you are aware of this info as it might influence your decision to spend a lot of time on it.)
不要使用盒模型(padding-right),因为它会破坏完全对齐文本的右边距(即使不完全对齐,也会导致行“提前”换行)。如果您要跨越句子之间的空间,您只需更改这些元素上的单词间距即可。如果要换行句子,您可以将段落或其他容器设置为具有更大的字间距,然后将句子设置回正常状态,或者您可以使用 after 选择器一步完成此操作:
is the worst possible method, as it disrupts justification. Pre-wrap as suggested gives coarse control but can't be justified. There are other space entities like &thinspace; and &nspace;, as well as a bunch of Unicode space characters that should give somewhat better control and should not break justification. These entities are the best non-CSS solution in my opinion.
For better control you need a CSS solution. You can either span the sentences, the obvious choice, or you can span the space between sentences. The latter to me seems more incorrect, but it is easier to achieve, especially if you have the common two-space typing habit - you can simply search and replace all period-space-space with a span around a space. I have some javascript that does this on the fly for blogger.
Don't use the box model (padding-right) as it will break the right margin of fully justified text (and even if not fully justified, causes lines to wrap "early"). If you are spanning the space between sentences you can just alter the word-spacing on these elements. If you are wrapping sentences, you can set your paragraph or other container to have bigger word-spacing, and the set the sentences back to normal, or you can do it in one step with the after selector:
发布评论
评论(6)
您可以使用
white-space: pre-wrap
保留空格序列,同时仍然换行文本:IE 8 模式下的 IE 8 之前不支持此功能,Firefox 3.0 之前也不支持此功能。
您还可以使用
或
来表示 1
em
或 1en
宽的空格。我不知道这些的支持有多广泛,但它们似乎可以在 Mac OS X 上的最新 WebKit 和 Firefox 上运行。两个
字符的序列将防止该空格中的换行符;这就是
的意思,不间断空格。序列
出现在第二行,稍微缩进文本,这可能是不可取的。序列
,它会防止该行被正确调整。
适用于书写某人姓名的情况,例如
一个句子。 Another.
导致一个句子。 Another.
工作正常,可以换行,并且不添加任何额外的缩进,但如果您在合理的文本中使用它,并在行末尾添加Mr. Torvalds
或以结尾的缩写。
,其中印刷惯例表明您不应将其拆分成行,以避免人们感到困惑并认为句子已经结束。因此,使用
序列是不可取的。由于这是一种风格效果,我建议使用
white-space: pre-wrap
,并接受这种风格在不支持它的平台上会不太理想的事实。编辑:正如评论中所指出的,
和
,还有一些仍然不支持使用空格,这样渲染效果不会太差,只有 Windows 2000 上的 IE 6 实际上会将它们渲染为破碎的框。 BrowserShots 不允许我选择我想要的确切浏览器/操作系统组合,因此我无法在 XP 上选择 IE 6 来查看是否有任何不同。所以,只要你能忍受 Win2K(或许还有 XP)上的 IE 6 损坏,这就是一个合理的答案。
white-space: pre-wrap
不适用于text-align: justify
。但是,我已经使用 不同实体的采样器 ://browsershots.org/http://ephemera.continuation.org/stackoverflow/spacing.html" rel="noreferrer">BrowserShots(令人讨厌的广告,有点片状且缓慢,但它是一项非常有用的服务的价格,这是免费的)。看起来有各种各样的浏览器,在各种各样的平台上,都支持另一种可能的解决方案是找到(或创建)一种字体,该字体具有用于“.”字符组合的字距调整对,以使它们的字距调整得更宽。现在所有主流浏览器都支持 @font-face ,包括 IE 到 IE 5.5(尽管 IE 使用与其他浏览器不同的格式),使用自己的字体实际上变得合理,如果不支持则回退到用户默认字体不会破坏任何内容。
最后一种可能性可能是让 CSS 委员会添加一个样式功能,该功能允许您指定在句子结尾处想要更宽的间距(这将由句点后跟一个空格来确定;首字母缩略词和缩写词需要一个
以避免获得更宽的空间)。 CSS 委员会目前正在讨论添加更高级的排版支持,因此现在可能是开始讨论此类功能的好时机。
You can use
white-space: pre-wrap
to preserve sequences of spaces, while still wrapping text:This is not supported in IE until IE 8 in IE 8 mode, nor in Firefox until 3.0.
You could also use
or
for spaces one
em
or oneen
wide. I do not know how widespread support of these is, but they seem to work on the latest WebKit and Firefox on Mac OS X.A sequence of two
characters will prevent line breaks in that space; that's what
means, non-breaking space. The sequence
to appear on the second line, indenting text slightly, which is probably undesireable. The sequence
at the end of the line, it will prevent that line from being properly justified.
is intended for the case of writing someone's name, like
A sentence. Another.
causes theA sentence. Another.
works fine, with line breaking and not adding any extra indentation, though if you use it in justified text, with theMr. Torvalds
, or an abbreviation ending with a.
, in which typographical convention says that you shouldn't split it across lines in order to avoid people being confused and thinking the sentence has ended.So, using sequences of
is undesirable. Since this is a stylistic effect, I'd recommend using
white-space: pre-wrap
, and accepting that the style will be a bit less than ideal on platforms that don't support it.edit: As pointed out in the comments,
and
, a few that don't still use spaces so the rendering isn't too bad, and only IE 6 on Windows 2000 actually renders them broken, as boxes. BrowserShots doesn't let me choose the exact browser/OS combos I want, so I can't choose IE 6 on XP to see if that's any different. So, that's a plausible answer as long as you can live with IE 6 on Win2K (and maybe XP) broken.
white-space: pre-wrap
does not work withtext-align: justify
. However, I've tested out a sampler of different entities using BrowserShots (obnoxious ads, and somewhat flaky and slow, but it's a pretty useful service for the price, which is free). It looks like a pretty wide variety of browsers, on a pretty wide variety of platforms, supportAnother possible solution would be to find (or create) a font that has a kerning pair for the ". " combination of characters, to kern them more widely apart. With
@font-face
support in all of the major browsers at this point, including IE back to IE 5.5 (though IE uses a different format than the other browsers), using your own font is actually becoming reasonable, and falling back to the users default font if not supported would not break anything.A final possibility might be to talk the CSS committee into adding a style feature that would allow you to specify that you want wider spacing at the end of sentences (which would be determined by a period followed by a space; acronyms and abbreviations would need an
in order to avoid getting the wider space). The CSS committee is currently discussing adding more advanced typography support, so now might be a good time to start discussing such a feature.
对于所有“过时”和“仅限单一空间”的反对者 - 读一本书。自古以来,专业出版商就在句子之间使用单个
,这就是等宽双空格标准的由来。以史为鉴,而不是空谈无据。不过,我必须承认
在大多数浏览器中看起来更好:
太宽了。您认为本段的可读性如何? Stackoverflow 的编辑器允许使用一些 HTML,并且我在所有句子之间使用
。
For all you 'antiquated' and 'mono-space-only' naysayers - Read a book. Professional publishers have used a single
between sentences for time immemorial, and THAT is where the monospace two-space standard came from. Learn from history instead of spouting rhetoric with no basis in fact. I have to admit, though, that an
looks better in most browsers:
is just too wide. What do you think of the readability of this paragraph? Stackoverflow's editor allows some HTML, and I'm using
between all sentences.
将每个句子包含在一个跨度中,并可能设置跨度的样式。 (不是一个很好的解决方案)。
Wrap each sentence in a span, and style the span perhaps. (Not a great solution).
从语义上讲,
不是正确使用的字符。这是一个不间断空格:不会用作换行符的空格。也许使用一个空格
或单个
,或者(我个人的建议)不要使用过时的双空格样式你的页面。
只是想抛出一点,如果您的目标是覆盖默认的浏览器空白实现以提供“适当的”句子间距,那么实际上有 关于什么构成适当间距的一些争论。看来双倍行距“标准”很可能只是打字机使用等宽字体时的遗留物。金钱报价:
除非您对此有严格要求,否则似乎不值得尝试和“修复”。 (我意识到这本身并不是您提出的问题的答案,但我想确保您了解此信息,因为它可能会影响您花大量时间的决定。)
Just wanted to throw out there that if your goal is to override the default browser whitespace implementation to provide "proper" sentence spacing, there is actually some debate as to what constitutes proper spacing. It seems that the double-space "standard" is most likely just a carryover from when typewriters used monospace fonts. Money quote:
Unless you have this as a strict requirement, it does not seem worth the effort to try and "fix." (I realize this is not an answer to your stated question per se, but wanted to make sure that you are aware of this info as it might influence your decision to spend a lot of time on it.)
是最糟糕的方法,因为它破坏了正当性。按照建议进行预包装可提供粗略控制,但不合理。还有其他空间实体,例如 &thinspace;和 &nspace;,以及一堆 Unicode 空格字符,它们应该提供更好的控制并且不应该破坏对齐。在我看来,这些实体是最好的非 CSS 解决方案。
为了更好地控制,您需要 CSS 解决方案。你可以跨越句子,这是显而易见的选择,也可以跨越句子之间的空间。后者对我来说似乎更不正确,但它更容易实现,特别是如果您有常见的两个空格打字习惯 - 您可以简单地搜索并用空格周围的跨度替换所有句号-空格-空格。我有一些 javascript 可以为博主动态执行此操作。
不要使用盒模型(padding-right),因为它会破坏完全对齐文本的右边距(即使不完全对齐,也会导致行“提前”换行)。如果您要跨越句子之间的空间,您只需更改这些元素上的单词间距即可。如果要换行句子,您可以将段落或其他容器设置为具有更大的字间距,然后将句子设置回正常状态,或者您可以使用 after 选择器一步完成此操作:
.your_sentence_class:after { content: “”;字间距:0.5em; }
is the worst possible method, as it disrupts justification. Pre-wrap as suggested gives coarse control but can't be justified. There are other space entities like &thinspace; and &nspace;, as well as a bunch of Unicode space characters that should give somewhat better control and should not break justification. These entities are the best non-CSS solution in my opinion.
For better control you need a CSS solution. You can either span the sentences, the obvious choice, or you can span the space between sentences. The latter to me seems more incorrect, but it is easier to achieve, especially if you have the common two-space typing habit - you can simply search and replace all period-space-space with a span around a space. I have some javascript that does this on the fly for blogger.
Don't use the box model (padding-right) as it will break the right margin of fully justified text (and even if not fully justified, causes lines to wrap "early"). If you are spanning the space between sentences you can just alter the word-spacing on these elements. If you are wrapping sentences, you can set your paragraph or other container to have bigger word-spacing, and the set the sentences back to normal, or you can do it in one step with the after selector:
.your_sentence_class:after { content:" "; word-spacing:0.5em; }