CODEWITHSUNDEEP
css
Vlad the Impala
Vlad the Impala

Reputation: 15872

Insert a line break in a heading instead of moving it

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?

Upvotes: 0

Views: 92

Answers (2)

Nick Bernhard
Nick Bernhard

Reputation: 106

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.

Upvotes: 0

Vimal Stan
Vimal Stan

Reputation: 2005

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

Upvotes: 2

Related Questions