Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Text Truncate Not Inline in Card
See original GitHub issueI’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
Issue Analytics
- State:
- Created 3 years ago
- Comments:10 (4 by maintainers)
Top Results From Across the Web
bootstrap card with min-width image text-truncate, text is not ...
in case of very small layout 'Goooooooooooooogle' is not truncated but right image is fall. i think something is wrong. mess. what is...
Read more >Text truncation · Bootstrap v5.1
text -truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block . This text is quite long, and...
Read more >2 Simple ways you can truncate text using CSS - Kritika's Blog
1) Truncate a single line text using ellipsis · the element must have. width , max-width or flex-basis(if using flex) · the element...
Read more >How To Fix Text-Overflow Ellipsis Not Working - Semicolon.dev
Set the element to display: inline-block or display: block (probably the former, but depends on your layout needs). · Set one of its...
Read more >text-overflow - CSS: Cascading Style Sheets - MDN Web Docs
The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Just wanted to note that you can use the utility class
align-topto applyvertical-align: topto your element.https://getbootstrap.com/docs/4.5/utilities/vertical-align/
Closing as stale.