带省略号的动态文本旁边的滑动图标

我有一个项目列表和一些项目的结尾，我想添加一个图标（或几个 - 它是动态的）。项目的容器具有固定宽度，如果项目的文本大小太大 - 我想添加省略号。
所以问题是图标被添加到文本旁边，如果文本很长 - 图标移出容器。所有项目的模板必须相同。
注意：并非所有项目都有图标，某些图标可能有多个图标。
注2： 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>

来源

2015-03-02 Kiril

如果有人还在寻找解决方案，我想通了：

标记：

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

来源

2016-02-02 05:57:00 reZed

尝试这样的：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; 
}

希望这有助于:)

来源

2015-03-02 12:36:50

问题是图标的数量是动态的。所以我不能为它设置'max-width：50px;'。文本和'最大宽度：70％;'相同。根本没有图标，在这种情况下，文本应扩展到整个项目空间。 – Kiril 2015-03-02 13:31:22

带省略号的动态文本旁边的滑动图标

回答

相关问题