0

Is there a CSS way to prevent a text element from wrapping from a previous text element?

i.e. My Table Header <i class="fa fa-search"></i> shows as

My

Table

Header

MySearchIcon

But I want it to display like this:

My

Table

Header MySearchIcon

The actual code is a combination of Razor and Html

  <th>
   @Html.DisplayNameFor(m => m.Projects.FirstOrDefault().Name) <i class="fa fa-search smaller fa-fade"></i>
  </th>

This is in a header of a table and depending on the header length I do want wrapping but I want a space and the icon to be stuck to the last word in the header and not wrap.

Because of the Razor piece of the code I can't place the non-breaking space up against the output directly,

Community
  • 1
  • 1
John S
  • 7,909
  • 21
  • 77
  • 145
  • Why are the words wrapping in the first place? I mean, obviously the system thinks that the text "My Table" is to long to fit on a line, so the text "Header MySearchIcon" would definitely be. – Mr Lister Dec 06 '17 at 18:49
  • can you add a
    tag after "table", If so hide the
    tag and display it back when necessary.     – blecaf Dec 06 '17 at 20:53

3 Answers3

0

I believe you can use white-space:nowrap; in your css.

You can also examine this question: HTML+CSS: How to force div contents to stay in one line?

0

Sure. You can use an HTML entity for a nonbreaking space. It would make your text node and icon be as follows

My Table Header&nbsp;<i class="fa fa-search"></i>

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
0

The solution ended up being to add a element after the razor code. i.e.

 <th>
   @Html.DisplayNameFor(m => m.Projects.FirstOrDefault().Name)<text>&nbsp;<i class="fa fa-search smaller fa-fade"></i></text>
  </th>
John S
  • 7,909
  • 21
  • 77
  • 145