Question

我有一个div并且在一个链接元素中在一个必须保持在同一行的span元素之前。用户可以编辑范围内的文本。但是当文本太长时，跨度跳转到一个新行，只留下第一行。我该如何防止这种情况？

所以，当我输入像＆＃34; aaaaaaaaaaaaaaaaaaa＆＃34;或者＆＃34; Aasdasd asdasd asdasdasd asdasd＆＃34;，跨度跳到一个新的行，现在div占用了前一倍的空间

EDIT2：我添加了一个小提琴here。我想要的是＆＃34;一些图标＆＃34;并且跨度文本保持在同一行！

编辑：这是我的代码：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

CSS：

Answer 1

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

DEMO：https://jsbin.com/yekohi/1/edit?html,css,output

Answer 2

如果我理解正确，您可以使用white-space: nowrap来阻止文本分成新行。

例如，

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用table-cell：

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

i, #slide-name {
    display: table-cell;
    white-space: nowrap;
}

jsfiddle

如何防止跨度增长与内容

3 个答案: