Question

我有这样的标记：

<div class="radio-choice score bottom">
  <input type="radio" name="name" value="v1" class="myradio" 
      /><a target="_blank" href="https://example.com/gudlink">Long description of a very interesting article</a>
</div>

我正在使用多列自举网格。我希望上面的html像这样呈现：

[] Long description of a ve

相反，我得到了：

[]
Long description of a very interesting article

该行停留在一行上，但延伸到列边界之外。

两个问题：

如何将文本与复选框保持在同一行，而不论其长度如何？
如何截断文本（请参见下面的标记-我正在使用white-space: nowrap;和overflow-x: hidden;）？

CSS：

我正在使用以下SCSS：

div.radio-choice.score {
    a {
        overflow-x: hidden;
        white-space: nowrap;
    }
    &:hover {
        overflow-x: visible;
    }
    input[type="radio"].myradio {
        width:  auto;
        display: inline;
    }
}

当我在span标签中使用一系列p标签时，我得到了想要的行为。如果将input和a标记放在一个范围内，我会得到相同的行为-a标记从下一行开始，其文本向右溢出。

这可能是有启发性的：当我使用DOM检查器时，我看到对于div.radio-choice.score a的规则来说，overflow-x: hidden;行被删除了，但是white-space: nowrap;行却没有被删除。鉴于还有其他S / O文章讨论截断锚文本，为什么会违反此规则？

对于断行问题，我当前的解决方案是使用margin-left: -2em;设置复选框样式，但是我希望有更好的方法来实现这一目的。

至于为什么我的锚文本没有被截断，我必须缩小范围。现在，我正在使用500行SCSS，很容易会有其他干扰。但是与此同时，我希望遇到这个问题并找到解决方案的人，或者对CSS的原理有很好的内部了解的人可以参与进来。

Answer 1

这应该有效。

a {
  overflow-x: hidden;
  white-space: nowrap;
}
a:hover {
  overflow-x: visible;
}
input[type="radio"].myradio {
  width:  auto;
  display: inline;
}
    
/*
  [ Solution ]
*/
.radio-choice {
  width: 300px;
  display: flex;
  border: 4px grey solid;
  padding: 4px;
}

a {
  text-overflow: ellipsis;
}

<div class="radio-choice score bottom">
  <input type="radio" name="name" value="v1" class="myradio" />
  <a target="_blank" href="https://example.com/gudlink">Long description of a very interesting article</a>
</div>

Answer 2

input和a标签都被赋予display: inline-block，以将它们保持在同一行。

我为超链接的文本溢出添加了省略号。

div.radio-choice.score {
  max-width: 150px; /* Assumption to create the effect */
}

a {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px; /* Assumption to create the effect */
  display: inline-block;
}

a:hover {
  overflow-x: visible;
}

input[type="radio"].myradio {
  display: inline-block;
}

<div class="radio-choice score bottom">
  <input type="radio" name="name" value="v1" class="myradio" /><!--
  --><a target="_blank" href="https://example.com/gudlink">Long description of a very interesting article</a>
</div>

如何将input：复选框和一个标记保留在同一行上？

CSS：

2 个答案: