Make items align in one line within a td tag

Assuming you have coded an html table as below:

But somehow the three Chinese characters don’t align in one line,

and you really wanna align them into one line.

One approach you can make is creating an inner table within that <td> tag.
But here I’d like to avoid using another table (cuz the more tables you use on a page, the slower the rendering speed is gonna be).

Instead, I will use <div> to handle this situation.
The solution is as shown:

You just need to substitute <td>我 爱 你</td> in the first image with the code snippet shown above. Basically, width:33% is to divide the <td> tag into equally 3 invisible columns and “nowrap” is a keyword I introduced before in wrap and no-wrap in html, especially in this newer example containing a font-awesome icon after the Character 我, cuz you don’t want the character and the icon being displayed in two lines.

And, <i class=”fa fa-fw fa-lg fa-heart”></i> is there to help you decode this three Chinese character sentence 🙂

At the end, please don’t be lazy, you can extract out style="" and put it into your css file 🙂