11

In <span> elements in HTML narrative flow, in order to expand the area on which clicks are detected (some of the spans have content of only one character), I am adding padding (offsetting it with a negative margin) in a class defined as

.expand-click-area {
    display:inline-block;
    padding:5px;
    margin:-5px;
    position:relative;
}

This works fine in terms of the clicking behavior. The problem is that Chrome 19 will sometimes line break between the span and the following comma in a case such as the following:

<span class="expand-click-area">this is span text</span>,

Any thoughts on how to prevent this? Essentially, I would like breaking behavior equivalent to that when the <span> is not there at all, or does not have display:inline-block.

This behavior does not seem to appear in IE10. See an example at http://jsfiddle.net/58XdJ/1/.

  • possible duplicate of [Prevent line-break of span element](http://stackoverflow.com/questions/7300760/prevent-line-break-of-span-element) – Serge Stroobandt May 31 '14 at 14:29
  • For some reason, when I put my spanned text in a `

    `, it no longer breaks the line. It's in a `

    `, and I understand that both `
    `s and `

    `s are block-level, so it makes no sense. Maybe because my div is a flex box?

     – Victor Stoddard Mar 25 '21 at 20:35

2 Answers2

9

Try wrapping the entire non-breakable text into the <nobr> tag.

Alexander Pavlov
  • 31,598
  • 5
  • 67
  • 93
  • 13
    That works, as does the CSS equivalent ``. –  May 07 '12 at 01:25
  • I use ` ` for use with Foundation 5. I sometimes need to shorten a description or title on smaller devices, so I do things like this: `Dominant Color`, but obviously that will break. So instead I use: `Dominant Color`. This is one really good reason I use it and it also means I don't have to write any css. – Eric Bishard Oct 24 '14 at 08:12
  • 3
    The `` tag has been deprecated and is now obsolete: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr – magikMaker Jul 07 '20 at 12:11
3

In case anybody faces this problem and none of the above solved solutions the problem like in my case, i found that adding this to the span will solve it. 

display: contents;

Hope this helps someone ;)

Mebarek Zouakh
  • 89
  • 2
  • 8