Question

我试图创建一个编号的字符串列表，我需要在向右浮动的字符串末尾添加一些值。我发现了以下问题（Right align some text within a list item），这个问题一直有效，直到文本不足以强制换行。浮动到右侧的文本与文本重叠。

剥离HTML：

<div class="container">
  <ol class="top3">
    <li>Short name<span class="top3-value">10%</span></li>
    <li>Very very long long long name<span class="top3-value">12%</span></li>
    <li>Very very long long longlonglongname<span class="top3-value">12%</span></li>
  </ol>
</div>

容器，top3和top3值类被定义为（使用LESS语法）：

.container {
  width: 175px;
}

ol.top3 {
  margin: 0;
  padding: 0;
  counter-reset: item;
  list-style: none;
  border-top: 1px solid #AEAEAE;

  li {
    position: relative;
    margin: 0 0 6px 0;
    padding: 10px 8px 10px 2em;
    list-style: none;
    border-bottom: 1px solid #AEAEAE;

    span.top3-value {
      padding-left: 1em;
      position: absolute;
      right: 0;
      font-weight: 700;
    }
  }
}

请参阅此示例：http://codepen.io/kdbruin/pen/xVyEya

设置容器的宽度，以便问题显现出来。在我的网页中，宽度可能会有所不同，并由页面上的其他元素决定。

我尝试在top3-value类中添加display: block，但这总是会强制文本下方的值，即使有足够的空间将其放在右边。此外，这将通过分隔线显示值。

使用float: right而不是绝对定位值时会显示类似的结果。

有什么建议吗？

Answer 1

如果能够更改容器类的宽度，可以输入

宽度：汽车;

这样它就会扩展到屏幕的末尾。所有动态值都可以在这里容纳。

Answer 2

CSS表和word-break可以打破任何非常长的文本。

我将列表项文本包装在一个范围内，以便更好地控制和选择。

＆＃13;

.container {
  width: 175px;
  background: pink;
}
ol.top3 {
  margin: 0;
  padding: 0;
  counter-reset: item;
  list-style: none;
  border-top: 1px solid #AEAEAE;
}
ol.top3 li {
  position: relative;
  margin: 0 0 6px 0;
  padding: 10px 8px 10px 2em;
  list-style: none;
  border-bottom: 1px solid #AEAEAE;
  display: table;
}
ol.top3 li:before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: 0;
  box-sizing: border-box;
  width: 1.5em;
  margin-right: 8px;
  padding: 4px;
  border-radius: 50%;
  color: #FFFFFF;
  background: #444444;
  line-height: 14px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}
ol.top3 li span {
  display: table-cell;
  vertical-align: middle;
}
ol.top3 li span:first-of-type {
  word-break: break-all;
  width: 100%;
}
ol.top3 li span.top3-value {
  padding-left: 1em;
  font-weight: 700;
}

＆＃13;

<div class="container">
  <ol class="top3">
    <li><span>Short name</span><span class="top3-value">10%</span>
    </li>
    <li><span>Very very long long long name</span><span class="top3-value">12%</span>
    </li>
    <li><span>Very very long long longlonglongnamelonglong</span><span class="top3-value">12%</span>
    </li>
  </ol>
</div>

＆＃13;

Answer 3

我的客户的单词突破困难有点夸张，这引导我根据各种评论和答案提出以下解决方案。

将列表项设为flexbox
使用flex-grow: 1
使用overflow: hidden剪切任何太长而无法放入框中的文字。这是可以接受的，并在单词之间提供适当的中断

CSS中的相关更改：

ol.top3 li {
  display: flex;
  flex-direction: row;
}

ol.top3 li span.top3-name {
  flex-grow: 1;
  display: block;
  overflow: hidden;
}

ol.top3 li span.top3-value {
  display: block;
  padding-left: 1em;
  font-weight: 700;
}

我已创建更新笔：http://codepen.io/kdbruin/pen/qZJrYM

右对齐CSS有序列表中的一些文本

3 个答案: