在响应式设计中指定 HTML 文本中的首选换行点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18222409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Specifying a preferred line break point in HTML text in a responsive design
提问by Forethinker
I was wondering if there is a CSS or javascript magic that could place a marker in an html text so that the browser know where the line break creation is preffered when the text gets cramped. Is there such thing?
我想知道是否有一个 CSS 或 javascript 魔法可以在 html 文本中放置一个标记，以便浏览器知道当文本变得狭窄时在哪里创建换行符。有这种事吗？
回答by jomo
回答by n_ermosh
回答by Jukka K. Korpela
Unfortunately, there is no way in HTML or CSS to express that some allowed line break point is more preferable than some other. If there were, we could expect to find it in the CSS3 Textmodule, but its current draft has nothing like that – just ways to control how allowed line break points are determined.
不幸的是，在 HTML 或 CSS 中没有办法表示某些允许的换行点比其他的更可取。如果有的话，我们可以期望在CSS3 文本模块中找到它，但它当前的草稿没有类似的东西——只是控制如何确定允许的换行点的方法。
What you cando is to disallow line breaks where they would normally be allowed. Typically, a space implies a line breaking opportunity, but using a no-break space (which can be written as if desired) you forbid that.
您可以做的是在通常允许的地方禁止换行。通常，空格意味着换行机会，但使用不间断空格（可以根据需要编写 ）您禁止这样做。
For example, if you have a heading text like “A bridge across the Irish Sea and four other amazing plans”, then you might say that there is the best line breaking opportunity is after “and”, a good opportunity after “across”, and a rather bad (though permissible) after “Irish”, and so on. But you can't do that in HTML or CSS, and typically not in typesetting programs either. You can just allow or disallow breaks, e.g. as in <h1>A bridge across the Irish Sea and four other amazing plans</h1>. For headings and headlines, this might make sense, even though it means that you consider each space and decide whether to make it non-breaking.
例如，如果您有一个标题文本，例如“横跨爱尔兰海的桥梁和其他四个惊人的计划”，那么您可能会说最好的换行机会在“和”之后，“跨越”之后的好机会，以及在“爱尔兰”之后相当糟糕（尽管允许），等等。但是您不能在 HTML 或 CSS 中这样做，通常在排版程序中也不能这样做。您可以只允许或禁止中断，例如在<h1>A bridge across the Irish Sea and four other amazing plans</h1>. 对于标题和标题，这可能是有道理的，即使这意味着您要考虑每个空间并决定是否使其不间断。
回答by Szili
You can put text into spans and prevent line breaks inside them. This way line breaks could only happen between two spans:
您可以将文本放入跨度并防止其中换行。这样换行只能发生在两个跨度之间：
<span style="white-space:nowrap">I won't break.</span>
<!-- this is a breaking point -->
<span style="white-space:nowrap">I won't break either.</span>
回答by MikesBarto2002
I definitely understand why you want this, and there have certainly been times that I have looked at a layout and at first thought, wanted the same thing.
我绝对理解你为什么想要这个，而且肯定有几次我看过布局，起初认为，想要同样的东西。
But I wouldn't be doing due justice if I didn't mention that doing this can cause some major word flow issues.
但如果我没有提到这样做会导致一些主要的词流问题，我就不会做应有的正义。
Do you have a responsive website? If so, just changing the size of the viewport on your browser can turn a nice looking line of word broken text into something that looks terrible.
你有响应式网站吗？如果是这样，只需在浏览器上更改视口的大小，就可以将漂亮的断字文本行变成看起来很糟糕的内容。
And even if you don't have a responsive website, and are using pixel-perfect design, all someone needs to do is change the size of the font and everything will go crazy.
即使你没有响应式网站，并且使用像素完美的设计，所有需要做的就是改变字体的大小，一切都会变得疯狂。
I would rethink this decision. Just my opinion, though.
我会重新考虑这个决定。不过，这只是我的意见。
