时间戳

首页 > 解决方案 > CSS文本溢出：嵌套div结构上的省略号包装

html - CSS文本溢出：嵌套div结构上的省略号包装

问题描述

标签： htmlcssoverflowword-wrap

解决方案

You are very close to your expected result.

Change .inner from inline-block to inline.

.inner {
    display: inline;
}


html, body {
  width: 100%;
}

.outer {
  background-color: lavender;
  display: inline-block;
  max-width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inner {
  display: inline;
}

.inner>* {
  display: inline;
}

.inner>:first-child::after {
  content: "~"
}
<html>

  <body>
    <div class="outer">
      <div class="inner">
        <div>left1</div>
        <div>right1</div>
      </div>
      <div class="inner">
        <div>left2</div>
        <div>right2</div>
      </div>
      <div class="inner">
        <div>left3</div>
        <div>right3</div>
      </div>
      <div class="inner">
        <div>left4</div>
        <div>right4</div>
      </div>
    </div>
  </body>

</html>

推荐阅读