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

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.

Post your HTML code so that one can find your exact problem. — Deepak Kumar, Jan 02 '18 at 12:09

score 1 · Answer 1 · answered Jan 02 '18 at 11:33

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>

score 0 · Answer 2 · answered Jan 02 '18 at 02:58

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>

score 0 · Answer 3 · answered Jan 02 '18 at 12:11

.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>

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

3 Answers3