控制单词之间的断点

Question

我有一个带文字的响应式页面。有时，休息会出现在影响意义或设计的异地。我可以控制句子可以破解的地方吗？

在这个简化的例子中，我可以说它只在句子的末尾打破了吗？我的意思是如果窗口大于500px，所有句子都没有中断。如果窗口小于500px，则每个句子的末尾都会出现中断。

以下是播放的示例：http://jsfiddle.net/SuJyN/

CSS：

#text {  
    margin:0 auto;
    width:100%;
    max-width:500px;
}

HTML：

<div id="text">
    This is the first sentence. This is the second sentence. This is the third.
</div>

Answer 1

您可以使用white-space: pre;

http://jsfiddle.net/SuJyN/4/

另一种方法是将它们视为块

http://jsfiddle.net/SuJyN/8/

Answer 2

输入一个不间断的空格 -   - 只要你不希望句子中断。

Answer 3

#text {  
    margin:0 auto;
    width:100%;
    max-width:500px;
    white-space: pre;
}

Answer 4

如果您还希望控制内部单词（连字符）发生中断的位置，您可以添加软连字符：

super­cali­fragilistic­expiali­docious

...或使用像hyphenator.js这样的脚本为您完成此操作。