Question

有没有人知道如何使用内联块的以下css技巧？

.text {
  display: block;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

我在同一行上有几个文本标签（h2＆amp; h3），即使我将display：block更改为inline-block，它仍然会弄乱布局。

有没有人做过类似的事情？

编辑：我只想连接h2（第一个元素），而不是h3标签内容。

Answer 1

试试这个

＆＃13;

p{
          display: inline-block;
          width: 100px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
    }

＆＃13;

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

＆＃13;

Answer 2

尝试将line-height用于text

的display:inline-block课程

＆＃13;

.text{
          display: inline-block;
          /* adjust line height for class text*/
          line-height: 25px;
          width: 100px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
    }

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

.text {
  display: inline-block;
  line-height:20px;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

＆＃13;

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

＆＃13;

如何使用内联块限制CSS显示的字符？

3 个答案: