html - 如何保留输入 :checkbox and an a tag on same line?

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

该行保持在单行上，但它超出了列边界。

两个问题:

1. 无论文本长度如何，如何使文本与复选框保持在同一行？

2. 如何截断文本(参见下面的标记——我正在使用 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;
    }
}

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

这可能是有益的:当我使用 DOM 检查器时，我看到对于 div.radio-choice.score a 的规则 overflow-x: hidden;行被删除，但 white-space: nowrap; 行没有。既然还有其他S/O文章在讲截断 anchor 文本，为什么要划掉这个规则呢？

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

至于为什么我的 anchor 文本没有被截断，我将不得不缩小范围。现在我正在使用 500 行 SCSS，很容易有其他东西干扰它。但与此同时，我希望遇到此问题并找到解决方案，或者对 CSS 机制有深入了解的人能够参与进来。

Answer 1

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>