html - 如何防止跨度随内容增长

Question

我有一个 div 和一个链接元素 在必须保持在同一行上的 span 元素之前。用户可以编辑范围内的文本。然而，当文本变得太长时，跨度跳到一个新行，单独留下第一行。我该如何防止这种情况？

所以当我输入像“aaaaaaaaaaaaaaaaaaa”或“Aasdasd asdasd asdasdasd asdasd”这样的文本时，跨度会跳到一个新行，现在 div 占用的空间是以前的两倍

EDIT2:我添加了一个 fiddle here .我想要的是“Some Icon”和跨度文本保持在同一行!

编辑:这是我的代码:

.slide {
background-color: red;
    height: 100px;
width: 100px;
}

.roundCorners {
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-topleft: 5px;
  border-radius: 5px;
}

<div class="slide roundCorners">
<i>some icon </i>
<span id="slide-name">That nasdasdasdame</span>
</div>

CSS:

Answer 1

.slide {
  display: inline-block;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

演示:https://jsbin.com/yekohi/1/edit?html,css,output