html - 控制单词之间的断点

Question

我有一个带有文本的响应页面。有时，中断出现在影响意义或设计的陌生地方。我可以控制句子在哪里中断吗？

例如，在这个简化的情况下，我可以让它只在句末中断吗？我的意思是如果窗口大于 500 像素，所有的句子都不会中断。如果窗口小于 500 像素，则中断将出现在每个句子的末尾。

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>

score 3 · Accepted Answer

您可以使用white-space: pre;

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

score 2 · Accepted Answer

2

输入一个不间断的空格 -  - 每当您不想让句子中断时。

于 2013-07-27T11:24:35.330 回答

score 0 · Accepted Answer

0

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

于 2013-07-27T11:27:00.437 回答

score 0 · Accepted Answer

如果您还想控制单词中出现中断的位置（连字符），您可以添加软连字符：

super&shy;cali&shy;fragilistic&shy;expiali&shy;docious

...或使用hyphenator.js之类的脚本为您执行此操作。

4 回答 4