Question

我有一个基本的HTML结构，其中有一个父div和两个孩子：span和a。 a向右浮动，我希望span以其文本内容的大小增长，直到它到达浮动的a，此时我希望文本用省略号截断

这是JSFiddle的链接：https://jsfiddle.net/56ua0jc8/

.parent {
  border: solid 1px black;
  overflow: hidden;
}

.text {
  border: solid 1px green;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link {
  border: solid 1px red;
  float: right;
}

<div class="parent">
  <span class="text">Some text that is so long that it's pushing the link down instead of truncating. What I really want is for the text to truncate with ellipses instead.</span>
  <a class="link" href="someUrl">Link</a>
</div>

目前span正在扩展并推下浮动a而不截断文本。我怎样才能使这个工作？

Answer 1

我建议放弃浮动并进入flexbox世界：

.parent {
  border: solid 1px black;
  display: flex; /*declare flexfox*/
}

.text {
  border: solid 1px green;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link {
  border: solid 1px red;
  margin-left: auto; /*push it to the right*/
}

<div class="parent">
  <span class="text">Some text that is so long that it's pushing the link down instead of truncating. What I really want is for the text to truncate with ellipses instead.</span>
  <a class="link" href="someUrl">Link</a>
</div>

单行文本未按浮动布局中的预期截断

1 个答案: