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

Question

我有一个侧边栏和一个像这样的标题：

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

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

我该怎么做？

Answer 1

为标题设置一个固定宽度，如果这不能解决它，然后参考这个

---

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

您可以指定最大宽度，以便侧边栏扩展至一定宽度，然后使文本换行。请记住，浏览器对此属性的支持并不普遍：请参阅此图表以了解兼容性。

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，很难给出具体的答案。