Question

我想向用户显示省略号。我使用text-overflow属性。文本必须在数字旁边，但是文本很长。如果定义宽度，则空间很大，很难看。如果我将宽度设置为自动，则文本较长这是代码：

.holder-new {
  position: relative;
  bottom: 0;
  width: 90%;
  background: red;
  height: 50px;
  padding-top: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.holder-content {
  width: auto;
  display: inline-flex;
}

.name {
  padding: 0!important;
  width: auto!important;
  padding-right: 5px!important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}

.duration {
  padding: 0!important;
  width: 15%!important;
}

<div class="holder-new">
  <div class="holder-content">
    <div class="name"><span>The text-overflow property </span></div>
    <div class="duration"><span>1:02</span></div>
  </div>
</div>

<div class="holder-new">
  <div class="holder-content">
    <div class="name"><span>The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user </span></div>
    <div class="duration"><span>1:02</span></div>
  </div>
</div>

演示：

https://jsfiddle.net/xpvt214o/689404/

Answer 1

只需为右DIV（时间）设置固定的px或百分比宽度，并为左DIV（即文本）设置width: auto。如果您为正确的DIV使用像素值，则该像素值将适用于所有容器尺寸/需要响应：

https://jsfiddle.net/em2svpko/

CSS文字溢出属性

1 个答案: