滑动图标旁边的动态文本与省略号 [英] Sliding icon next to dynamic text with ellipsis

问题描述

我有一个项目列表，以及一些项目的结尾，我想添加一个图标（或其中的几个 - 它是动态的）。项目的容器有一个固定的宽度，如果项目的文本大小太大 - 我想添加省略号。

所以问题是图标被添加到文本旁边，如果文本很长 - 图标离开容器。所有项目的模板必须相同。

注意：并非所有项目都有图标，某些图标可能有多个图标。

注2： javascript解决方案不适用，希望使其成为纯CSS。

实际：

预计：

非常感谢您的任何帮助。

  body {font-size：20px;}。container {width：150px;背景：＃ff0; list-style：none; padding：0px; margin：0px;} container li {border-bottom：1px solid＃000;}。item {overflow：hidden;白色空间：nowrap; text-overflow：ellipsis;}。icon {background：＃0f0;}  

 < ul class =container> <李> < div class =item> < span class =text>文字1< / span> < span class =icon> 12< / span> < / DIV> < /锂> <李> < div class =item> < span class =text>文字2文字2< / span> < span class =icon> 12< / span> < / DIV> < /锂> <李> < div class =item> < span class =text>文字3文字3文字3< / span> < span class =icon> 12< / span> < / DIV> < /锂> <李> < div class =item> < span class =text>文字4文字4文字4< / span> < span class =icon>< / span> < / DIV> < / li>< / ul>  

解决方案

标记：

<$ p

如果有人仍在寻找解决方案， $ p> < div class =block-wrap>
< div class =block>
< div class =icon>< / div>
< div class =text>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本< / div>
< / div>
< / div>


样式：

  .block-wrap {
 display：inline-block; 
最大宽度：100％; 
} 
 
 .block {
 width：100％; 
} 
 
 .text {
 display：block; 
 overflow：hidden; 
 white-space：nowrap; 
文本溢出：省略号; 
} 
 
 .icon {
 float：right; 
 margin-left：10px; 
 width：20px; 
 height：14px; 
背景颜色：＃333; 
} 
  

https://jsfiddle.net/related/n1qft37L/

I have a list of items and to the end of some items I want to add an icon (or several of them - it's dynamic). Items' container has a fixed width and if item's text size is too big - I'd like to add ellipsis.
So the problem is that icon is added next to text and if text is long - the icon moves off the container. The template for all items has to be the same.
Note: not all items have icons and some icons may have more than one icon.
Note2: javascript solution is not applicable, want to make it in pure CSS.

Actual:

Expected:

Any help is much appreciated.

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>

解决方案

If anyone still looking for solution I figured it out:

Markup:

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

Styles:

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

这篇关于滑动图标旁边的动态文本与省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！