How to limit character displayed with CSS using inline-blocks? - html

Question

Does anyone know how to use the following css trick with inline-blocks?
.text {
display: block;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
I have couple of text tags (h2 & h3) on the same line and even if I change the display: block to inline-block, it still messes up the layout.
Has anyone done anything similar?
EDIT: I only want to concatenate the h2 (first element), not the h3 tag content.

Answer 1

try this
p{
display: inline-block;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<p class="text">this is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
</p>

Answer 2

Try to use line-height for class text with display:inline-block
.text{
display: inline-block;
/* adjust line height for class text*/
line-height: 25px;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<h2 class="text">this is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
</h2>
<h3 class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
</h3>

Answer 3

.text {
display: inline-block;
line-height:20px;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<h2 class="text">this is Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.
</h2>
<h3 class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.
</h3>