Need help with creating an HTML button that opens a link. The button consists of a title and a short description, but when the description is too long, it overflows outside the button.
Currently implementing bootstrap and jquery.
Code:
body {
background-color: #c0c0c0;
}<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<div class="container-fluid" style="text-align : center">
<div id="final">
<div>
<a href="#" target="_blank" style="text-decoration: none;">
<button class='btn btn-info btn-block'>
<b>
<p>
Heading that fits
</p>
</b>
<p>
Long description overflowing from the button. Meant to be a brief summary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor iaculis enim eu ultrices. Pellentesque nec hendrerit mauris.
</p>
</button>
</a>
</div>
<div id="search-result"></div>
</div>
</div>Attempts made so far:
p { // Attempted to hide overflow and add ellipsis
overflow: hidden;
text-overflow: ellipsis;
}
Or
btn {
// Tried setting display to inline-block
display: inline-block;
}
Or
p {
// Also tried setting display to inline-block
display: inline-block;
}
Researched on Stack Overflow and came across two suggestions:
- Using
overflow: hidden;which truncates text instead of wrapping. - Applying
display: inline-block;but having trouble making it work.