0

Thanks in advance for any help you can provide. I have an application with the title "A Taste of San Diego, California".

A Taste of San Diego, California

When the screen is desktop size this displays nicely in one line. It still looks great when the screen collapses to tablet size. But when I get to smartphone size the text breaks like this;

Line 1: A Taste of San Line 2: Diego, California

I have searched the Internet far and wide and even asked my Bootstrap tutor about how to keep "San Diego" together as if it were one word. I think it would even be better if it broke into 3 lines, if it has to;

Line 1: A Taste of Line 2: San Diego, Line 3: California

How can I control where the text breaks on collapse? Is the only solution to put it into 3 lines to begin with?

Tasos K.
  • 7,979
  • 7
  • 39
  • 63
Dan Cheshire
  • 43
  • 3

1 Answers1

3

Use San Diego to keep "San" and "Diego" together.

  is a non-breaking space.

ceejayoz
  • 176,543
  • 40
  • 303
  • 368
  • Very Cool. Thanks very much! – Dan Cheshire Jun 07 '15 at 03:12
  • The funny thing is that neither my college professor or the rest of the class could come up with this simple answer. It works brilliantly, of course. And such a simple fix. It's one of the first things you learn when studying HTML and yet nobody else thought of it. Too funny. – Dan Cheshire Jun 07 '15 at 03:35
  • 1
    Maybe your college professor is not well-researched. Yes that was a simple fix, it's also a basic knowledge when studying html. – Dexter Huinda Jun 07 '15 at 15:33
  • Well, in all fairness I don't think the problem was whether anyone was "well-researched". Everyone was trying to come up with a solution in Bootstrap and basic HTML wasn't part of the thought process. Just one of those interesting mind tricks. – Dan Cheshire Jun 09 '15 at 15:19