首页 文章

用省略号在动态文本旁边滑动图标

提问于
浏览
2

我有一个项目列表,并在一些项目的末尾我想添加一个图标(或其中几个 - 它's dynamic). Items'容器有一个固定的宽度,如果项目's text size is too big - I' d喜欢添加省略号 .
所以问题是在文本旁边添加了图标,如果文本很长 - 图标会移出容器 . 所有项目的模板必须相同 .
Note: 并非所有项目都有图标,而某些图标可能有多个图标 .
Note2: javascript解决方案不适用,想在纯CSS中制作它 .

实际:

enter image description here

预期:

enter image description here

任何帮助深表感谢 .

body {
  font-size: 20px;
}

.container {
  width: 150px;
  background: #ff0;
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.container li {
  border-bottom: 1px solid #000;
}

.item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon {
  background: #0f0;
}
<ul class="container">
  <li>
    <div class="item">
      <span class="text">Text 1</span>
      <span class="icon">12</span>
    </div>
  </li>
  <li>
    <div class="item">
      <span class="text">Text 2 Text 2</span>
      <span class="icon">12</span>
    </div>
  </li>
  <li>
    <div class="item">
      <span class="text">Text 3 Text 3 Text 3</span>
      <span class="icon">12</span>
    </div>
  </li>
  <li>
    <div class="item">
      <span class="text">Text 4 Text 4 Text 4</span>
      <span class="icon"></span>
    </div>
  </li>
</ul>

2 回答

  • 0

    如果还有人在寻找解决方案,我想出来了:

    标记:

    <div class="block-wrap">
      <div class="block">
        <div class="icon"></div>
        <div class="text">Text text text text text text text text text text text text text text text text text text text</div>
      </div>
    </div>
    

    样式:

    .block-wrap {
      display: inline-block;
      max-width: 100%;
    }
    
    .block {
      width: 100%;
    }
    
    .text {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    
    .icon {
      float: right;
      margin-left: 10px;
      width: 20px;
      height: 14px;
      background-color: #333;
    }
    

    https://jsfiddle.net/rezed/n1qft37L/

  • 5

    试试这样: Demo

    修复 .item class 旁边文本的宽度,并使 display as inline-block 浮动图标 . CSS:

    .item {
        width:100%;
        overflow: hidden;
    }
    .item >span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width:70%;
        display:inline-block;
    }
    .icon {
        background: #f00;
        display:inline-block;
        max-width:50px;
    }
    

    希望这可以帮助 :)

相关问题