Bootstrap: Text Truncate Not Inline in Card

[hashnimmo]

I'm trying to truncate the strong text within this card and it doesn't want to get inline. Here's a screenshot;

Here's the code;

<div class="card mx-3 mt-3">
<div class="card-body">
<p>Your search <span class="d-inline-block text-truncate" style="max-width: 150px;"><strong>very very very long text</strong></span> did not match any topics.</p>
<p>Suggestions:</p>
<ul>
<li>Make sure that all words are spelled correctly.</li>
<li>Try different keywords.</li>
<li>Try more general keywords.</li>
</ul>
</div>
</div>

I'm using;
Bootstrap: Version 4.4.1
Operating system: Microsoft Windows 10 Version 2004 (OS Build 19041.450) 64-bit
Browser: Microsoft Edge Version 84.0.522.63 64-bit

[neralex]

The class text-truncate is using overflow:hidden and this changes the baseline position of an inline-block element. Add vertical-align: top; to your span:

<div class="card mx-3 mt-3">
  <div class="card-body">
    <p>Your search <span class="d-inline-block text-truncate" style="max-width: 150px; vertical-align: top;"><strong>very very very long text</strong></span> did not match any topics.</p>
    <p>Suggestions:</p>
    <ul>
      <li>Make sure that all words are spelled correctly.</li>
      <li>Try different keywords.</li>
      <li>Try more general keywords.</li>
    </ul>
  </div>
</div>

[hashnimmo]

The class text-truncate is using overflow: hidden; and this changes the baseline position of an inline-block element. Add vertical-align: top; to your span:

Thank you so much for this, that obviously worked and made it inline. I'm still curious why it didn't want to be inline before, is this how d-inline-block + text-truncate were supposed to be or was I using it incorrectly?

[neralex]

You did it as it is stated in the docs. I have the same issue with Firefox. I guess this behavior is based on the fact, that a inline-block element respects padding and margin values like a block-element. This is not really a bootstrap-issue, its more based on the browser renderings because you can reproduce it also without bootstrap but maybe one of the devs can tell us more.

https://jsfiddle.net/6ryxgsj8/

[hashnimmo]

This is not really a bootstrap-issue, its more based on the browser renderings because you can reproduce it also without bootstrap but maybe one of the devs can tell us more.

As this doesn't seem to be a Bootstrap issue, should I close this issue or leave it like this?

[Hiws]

Just wanted to note that you can use the utility class align-top to apply vertical-align: top to your element.

https://getbootstrap.com/docs/4.5/utilities/vertical-align/

[ffoodd]

The diagnostic looks good, as well as @Hiws suggestion to work around this. I made a CodePen to both reproduce and document this behaviour. @shadeed mentions this in his "Overflow in CSS" post.

@mdo @MartijnCuppens Should we apply vertical-align: top; to .text-truncate, or would it have side-effects?

[hashnimmo]

Just wanted to note that you can use the utility class align-top to apply vertical-align: top to your element.

Finally, thank you. Will leave this issue open for the developers to decide.

[mdo]

would it have side-effects?

Most likely it'd have side effects. Best solution would be the utility being added manually as needed, and adding a note to the docs. Anyone want to take on a PR for adding a mention to the truncate docs in v4-dev?

[AjitsinghKamal]

@mdo I can raise a PR for that