Question

我的情况是，我有两段水平相邻的文本（并包含在<li>中）。有一个标题具有正常的理由，然后一个距离浮动正确。无论如何，我希望这些都能保持在同一条线上。理想情况下，“标题”部分将使用overflow:ellipse，并且无论屏幕尺寸有多窄，“距离”部分都会显示在原位。

所以，

|----------------------------------|
|This title is too lo...  4.9 miles|
|Short title              2.4 miles|
|...                               |
|----------------------------------|

我尝试了几种方法来实现这一目标，包括使用display: table。我无法完全达到这个结果。这就是我目前所拥有的：

HTML：

   <li <?php echo $theme; ?>>
     <a href='#' onclick="load_page('<?php echo $listingurl;?>')">
        <span class='container'>
          <span class='name'>
            <?php echo $name;?>
          </span>
          <span class='distance'>
            <?php echo $distance;?>&nbsp;mi</span>
          </span>
        </span>
    </a>
  </li>

少/ CSS：

.container {
  display: table;
  > span {
    display: table-cell;
  }
}

.name {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.distance {
  float:right;
}

Answer 1

您是否尝试过2016-05-16 19:44:05.850？

white-space: nowrap;

li {
    white-space: nowrap;
}

https://jsfiddle.net/Lu64d6w5/

Answer 2

只需使用 white-space 规则即可。尝试将此CSS规则提供给容器：

white-space: nowrap;

根据W3：

nowrap：空格的序列将合并为一个空白。文本永远不会换行到下一行。案文继续在同一行，直到遇到一个标签

强制文字留在一行

2 个答案: