2

My question is not a repeat of Prevent line-break of span element, I need to simply underline part of a line of text.

The underlining is for marking of revisions to a piece of text. This is the standard method for the organization to mark revisions in all of their legal documents. It is not an option. I can't just say "I'll make this red text instead of underlining" or something like that. It MUST be underlined text.

The problem I am having is that when I use a span tag it forces a line break.

For example, I want ONLY "13" underlined in the below text:

4.13 The name of this Section is Foo.

If I use 

<p class="textStyle_1">4.<span class="revMark">13 </span>Plug and Slot Welds</p>

Where the style in the span tag is:

.revMark {
  text-decoration: underline;
}

I get this:

4.

13

The name of this Section is Foo.

(The 13 is underlined but I, obviously do not want the line breaks.)

If I use this style:

.revMark {
  text-decoration: underline;
  white-space: nowrap;
}

as suggested by the answer shown in the question above, I still get the line breaks.

I also tried using nowrap on the p tag, as in:

<p class="noWrapping">4.<span class="revMark">13 </span>Plug and Slot Welds</p>

Where the style are:

.revMark {
  text-decoration: underline;
}

.noWrapping {
  white-space: nowrap;
}

None of this works. I always get the line breaks. I even tried using the <u></u> tag but it also produces line breaks.

I read on another site somewhere that Chrome has some sort of bug that causes it to ignore the nowrap in css. I don't know if that is true or not.

I have not tried it on any other browsers as my project is not going to be viewed on other browsers. It will be a desktop app built with Electron. Electron is built around Chromium, so if it looks wrong in Chrome it will look wrong in Electron.

UPDATE:

This seems to have something to do with grid layout. If I comment out display: inline-grid; in the below css, the line breaks disappear. But removing that causes other problems with my grid layout.

.textStyle_1 {
  display: inline-grid;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  margin: 0px;
  padding-top: 3px;
  padding-right: 2px;
  padding-bottom: 2px;
  padding-left: 3px;
}
  • Nice. I get my question edited within seconds of submitting it to correct some minor things grammatical junk. and apparently the editor did not like that fact that I said this is "Driving me Nutty!" But zero suggestions for a solution. I love this site. –  Jun 04 '18 at 10:24
  • 1
    I see no line break I am using chrome. Can you make a fiddle perhaps something is causing it – Friday Ameh Jun 04 '18 at 10:32
  • I have about a zillion lines of code. What I put in the question is the only thing that is relevant. I have tried it in codepen and it behaved correctly. Very odd. Let me dig a bit in my other styles. Maybe bootstrap is doing something. –  Jun 04 '18 at 10:39
  • @Friday Ameh I edited the questions. I added more information at the bottom. Your comment, and the fact that this worked in codepen, got me thinking it may have been bootstrap. But it is not. this seems to be caused by my use of `display: inline-grid`. –  Jun 04 '18 at 10:52
  • Yes that is the cause of the problem perhaps I should post and answer – Friday Ameh Jun 04 '18 at 10:57

1 Answers1

1

The problems comes as a result of the display: inline-grid in .textStyle_1 class, remove the display: inline-grid and everything works fine

    
    .revMark {
      text-decoration: underline;
    }
    
    .noWrapping {
      white-space: nowrap;
    }
    
    .textStyle_1 {
      /*display: inline-grid;*/
      font-size: 12px;
      font-weight: 400;
      line-height: normal;
      margin: 0px;
      padding-top: 3px;
      padding-right: 2px;
      padding-bottom: 2px;
      padding-left: 3px;
    }
    
    
    <p class="textStyle_1">4.<span class="revMark">13 </span>Plug and Slot Welds</p>
Friday Ameh
  • 1,664
  • 1
  • 10
  • 15
  • 1
    Yes, this is the root of the problem. But as is always the case (or seems to be), solutions lead to problems. When I remove that it causes other problems...I will have to deal with that separately. But in terms of the specific issue of line breaks the answer is correct. Thanks for the help. –  Jun 04 '18 at 11:07
  • 1
    One other thing...white-space: nowrap is not necessary. I removed it and it works fine. –  Jun 04 '18 at 11:09
  • Great... Good you have your problem fixed. – Friday Ameh Jun 04 '18 at 11:18