在标题中插入换行符而不是移动它

Question

我有一个侧边栏和标题，如下所示：

两者都没有浮动，因为我希望我的文字环绕侧边栏。问题是，当标题太长时，它就不合适了：

我希望它保留在同一个地方，但只需分成两行：

我该怎么做？

Answer 1

为标题设置固定宽度，如果不能解决，请参阅this

---

编辑：由于OP不想指定固定宽度

您可以指定最大宽度，以便侧边栏扩展到一定宽度，然后使文本换行。请记住，浏览器不支持此属性：请参阅此chart以获取兼容性。

max-width in IE

Answer 2

我的建议是float: left侧边栏。然后标题应该没有问题。它可以完成，并且是最好的路线，即使HTML必须被重新设计以适当地嵌套。

或者，您也可以使用jQuery来完成此任务：

$(window).resize(function() {
  doc_width = $(document).width();
  doc_width = doc_width.replace("px","");
  sidebar_width = $("#sidebar").width();
  sidebar_width = sidebar_width.replace("px","");
  $("#header").css("max-width", (doc_width - sidebar_width) + "px");
});

看看它是否适合您。没有实际的HTML，很难给出具体的答案。