0

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

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

这是玩的例子: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>
4

4 回答 4

3

您可以使用white-space: pre;

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

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

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

于 2013-07-27T10:25:56.387 回答
2

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

于 2013-07-27T11:24:35.330 回答
0
#text {  
    margin:0 auto;
    width:100%;
    max-width:500px;
    white-space: pre;
}
于 2013-07-27T11:27:00.437 回答
0

如果您还想控制单词中出现中断的位置(连字符),您可以添加连字符

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

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

于 2013-07-27T11:29:12.613 回答