0

The title might be a little confusing, but didn't know how to name it correctly. Basically I have a text like this:

content3 (-content1) content4 (-content2)

which I display in a span element. The element has a varied widths and in some case text above needs to be broken into two lines. Unfortunately it often brakes on '-' symbol which make it look like this:

content3 (-content1) content4 (-
content2)

Is there any way I could prevent it from happening. Would be happy with this format:

content3 (-content1) content4 
(-content2)
Bartosz
  • 4,542
  • 11
  • 43
  • 69

2 Answers2

1

If you enclose your content in a span, you can use white-space:nowrap; to make the content drop down.

HTML 

<div class="sup" id="pr">
    <strong>
        <span class="content">content3</span>
        <span class="content">(-content1)</span>
        <span class="content">content4 </span> 
        <span class="content">(-content2)</span>
    </strong>
</div>

CSS

.sup {
    width: 300px;
    border: 1px solid black;
    margin-bottom: 2px;
}
#pr {
    width:100%;
}
.content {
    white-space:nowrap;
}

JSFiddle

Darren Willows
  • 2,053
  • 14
  • 21
0

You can always go around this by using a non-breaking hyphen &#8209;. I'm not sure if this is the ideal solution and it isn't elegant but it will solve your problem and it is simple.

Christian Lundahl
  • 2,000
  • 3
  • 18
  • 29