CODEWITHSUNDEEP
csshtml-table
Alexander Wilson
Alexander Wilson

Reputation: 1

How can I keep this text on the same line

Simply I have two bits of text on the line

Kroppspoäng and also (sty+kyl)

But they have moved to different lines

 <td class="sheet-table-invis2">
                                <h4 data-i18n="hit-points">Kroppspo&auml;ng</h4><h5 data-i18n="strength-agility">(sty+kyl)</h5>
                            </td>

Upvotes: 0

Views: 60

Answers (2)

risingPhoenix1979
risingPhoenix1979

Reputation: 1164

I wouldn't recommend using a display: flex CSS rule as this isn't supported at all in IE9 or fully supported in IE10. These browser version are still very popular.

Instead, I'd suggest using the white-space: nowrap and display:inline-block CSS rules per the code below so IE9, IE10, and all other popular browsers are supported.

.sheet-table-invis2 {
  white-space: nowrap;
}

.sheet-table-invis2 h4, .sheet-table-invis2 h5 {
  display: inline-block;
}
<table>
  <td class="sheet-table-invis2">
    <h4 data-i18n="hit-points">Kroppspo&auml;ng</h4><h5 data-i18n="strength-agility">(sty+kyl)</h5>
  </td>
</table>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

The h4 and h5 are block elements, so their widths will take up the width of their parent and stack on top of one another as rows. To display them inline with one another, make them inline-block

h4,h5 {
  display: inline-block;
}
<td class="sheet-table-invis2">
  <h4 data-i18n="hit-points">Kroppspo&auml;ng</h4>
  <h5 data-i18n="strength-agility">(sty+kyl)</h5>
</td>

You can also make the parent flex and the default direction will be a row

.sheet-table-invis2 {
  display: flex;
}
<table>
  <td class="sheet-table-invis2">
    <h4 data-i18n="hit-points">Kroppspo&auml;ng</h4>
    <h5 data-i18n="strength-agility">(sty+kyl)</h5>
  </td>
</table>

Upvotes: 2

Related Questions