html/css 中点换行答案

【问题标题】：html/css break line at midpointhtml/css 中点换行
【发布时间】：2015-08-27 05:51:01
【问题描述】：

我想打印一个跨越两行的标题，并在尽可能靠近中点的地方断行。
例如，如果标题是

《仲夏夜之梦》

我不希望它破坏为

“仲夏夜”
“梦想”

但更像

“仲夏”
《夜之梦》

如果标题足够长，需要三行，我希望所有三行的长度尽可能接近。等等。

有没有办法用 CSS 做到这一点？请不要问我到目前为止我尝试了什么，因为我根本没有任何想法。 :-(

附录

哦，我从几个 cmets 和答案中看到我的问题不完整。我不想嵌入 br 或其他什么，因为（a）文本来自数据库，并且我不想要求用户输入标签，并且（b）这是一个响应式设计，依此类推桌面文本应该适合两行，但在手机上可能需要三行，而且我不想要任意额外的换行符。目前，我需要硬编码的 br，因为我没有其他想法，并且我有一个媒体查询将这些 br 设置为 display:none 用于手机，因为在小屏幕上随意包装会给我带来更好的结果。

【问题讨论】：

你能不能只使用一个
标签来将标题分隔到一个新行上？还是我错过了理解这个问题？
@Whirlwind990 句子会改变，我猜这只是一个例子。
您将需要 javascript 来实现这一点，具体取决于标题的长度。
@SoorajChandran 那么如何在动态句子中放置一个甚至中断？我认为没有办法通过 CSS 做到这一点。就像你说的那样，也许在 Javascript 中是可能的
@Whirlwind990 是的，需要 javascript。据我所知，在纯 css 中无法做到这一点

标签： html css

【解决方案1】：

使用white-space:nowrap

好的，如果内容如下所示

<div>A Mid-Summer Night's Dream</div>

然后使用下面的

<div>A Mid-Summer <span style="white-space:nowrap;">Night's Dream</span></div>

将内容放在您不想破坏的范围内。让我知道它是否有效

【讨论】：

【解决方案2】：

如果我理解正确，justify 就是你要找的

CSS 属性：text-align: justify;

此外，您可能还想使用text-justify: inter-word;

http://www.w3schools.com/cssref/css3_pr_text-justify.asp

编辑：刚刚检查了这个属性只在 IE 中支持

【讨论】：

无论如何这不是问题所要求的。

【解决方案3】：

您可以使用white-space: pre-line; 使元素的行为类似于<pre>，从而保留换行符。示例：

<style>
 p {
  white-space: pre-line;
 }
</style>
<p>A Mid-Summer 
Night's Dream</p>

Demo here

【讨论】：

【解决方案4】：

这可能是（部分）解决方案：在单词之间添加 &nbsp; 而不是真正的空格，以便在换行时这些单词粘在一起。

A&nbsp;Mid-Summer Night's&nbsp;Dream

https://jsfiddle.net/ca7vhz83/

【讨论】：

【解决方案5】：

我建议使用ch 单元 (see MDN)，它并不完美，但可以很好地完成任务：

这个标记：

<style>
h1 {
    width: 20ch;
}
</style>


<h1>"A Mid-Summer Night's  Night's  Night's  Night's  Dream"</h1>
<h1>"A Mid-Summer Night's  Dream"</h1>

将产生以下输出：

"A Mid-Summer 
Night's Night's Night's 
Night's Dream"

"A Mid-Summer
Night's Dream"

【讨论】：