<span>不阻止文字

Question

我有一个列表，显示用户点击的不同操作。我有一个“徽章”，旁边是文字，我向右浮动显示一个数字。问题是我在徽章之前的文字没有换行。

insert = "<a href=\"#!\" class=\"collection-item\" id=\"" + data[i].id + "\"><h5 class = \"orange-text text-darken-2\"> " + name + "  <span class=\"badge green white-text\">" + score + "pts</span></h5> <p>" + distance + " miles" + " </p></a>";

打印列表中的每个条目。正如您所看到的，使用name插入的文本会从跨度中找到绿色徽章：

Answer 1

我使用这个css片段。它包装并在最后添加一些省略号：

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

更新：

以下是我的某个应用中的真实示例。

HTML：

<ul class="panelList">
    <li class="receipt">
        <span class="glyphicons bin"></span>
        <span class="listcounter"></span>
        Dinkelbrötchen über Nacht
    </li>
</ul>

CSS：

.panelList {
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

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

«bin»span是一个垃圾删除，«listcounter»是列表中的工作计时器。元素的顺序不是在你的应用程序中，而是一些问题。

Answer 2

尝试http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

word-wrap: break-word;
display:block