Insert a line break in a heading instead of moving it

Question

I have a sidebar and a title sitting like this:

Neither is floated because I want my text to wrap around the sidebar. The problem is, when the title gets too long, it falls out of place:

I would prefer that it stay in the same place but just break into two lines instead:

How would I do this?

I don't want to define a fixed width because the width of the sidebar changes. — Vlad the Impala, Apr 23 '13 at 05:22

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

Set a fixed width for the title, if that doesn't fix it, then refer to this

EDIT: Since the OP doesn't want to specify a fixed width

You can specify a max-width so that the sidebar will expand up to a certain width and then cause the text to wrap. Do keep in mind that the support for this property is not universal among browsers: Refer to this chart for compatibility.

max-width in IE

edited May 23 '17 at 11:43

Community

1
1

answered Apr 23 '13 at 05:09

Vimal Stan

2,007
1
12
14

Nick Bernhard · Answer 2 · 2013-04-23T05:36:12.920

0

My recommendation is to float: left the sidebar. The headline should then wrap with no problem. It CAN be done, and would be the best route to go, even if the HTML has to be reworked to nest appropriately.

Alternatively, you can use jQuery to accomplish this as well:

$(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");
});

See if that works for you. Without the actual HTML it's difficult to give a specific answer.

edited Apr 23 '13 at 05:36

answered Apr 23 '13 at 05:17

Nick Bernhard

106
4

I don't want to float it left because then the rest of the layout breaks. – Vlad the Impala Apr 23 '13 at 05:22
I added a jQuery option as well. See if that suits your needs. – Nick Bernhard Apr 23 '13 at 05:37

Insert a line break in a heading instead of moving it

2 Answers2