Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in Web Technology by (20.3k points)

I'm looking to prevent a line break after a hyphen - on a case-by-case basis that is compatible with all browsers.

Example:

I have this text:  3-3/8" which in HTML is this:  3-3/8”

The problem is that near the end of a line, because of the hyphen, it breaks and wraps to the next line instead of treating it like a full word...

3-

3/8"

I've tried inserting the "zero-width no-break character",  with no luck...

3-3/8”

I'm seeing this in Safari and thinking it will be the same in all browsers.

The following is my doctype and character encoding...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Is there any way I can prevent these from line-breaking after the hyphen? I do not need any solution that applies to the whole page... just something I can insert as needed, like a "zero-width no-break character", except one that works.

Here is a Demo. Simply make the frame narrower until the line breaks at the hyphen.

http://jsfiddle.net/RagKH/

1 Answer

0 votes
by (40.4k points)

You can just wrap the relevant text like this:

<span style="white-space: nowrap;"></span>

Related questions

0 votes
1 answer
0 votes
1 answer
asked Sep 4, 2019 in Web Technology by Tech4ever (20.3k points)
Welcome to Intellipaat Community. Get your technical queries answered by top developers!

28.4k questions

29.7k answers

500 comments

94k users

Browse Categories

...