中心溢出的文本容器[重复]答案

【问题标题】：Center overflown text container [duplicate]中心溢出的文本容器[重复]
【发布时间】：2017-03-30 12:10:49
【问题描述】：

如图所示，我需要去掉红圈粗略表示的区域。目的是使第二个单选按钮水平居中，其标签与上面和下面的标签一样。这个额外的不想要的宽度是由于文本溢出和当没有足够的宽度让它全部放在一行时单词中断到下一行而产生的。

请注意，目的是使单选按钮和标签居中，即单选按钮的右边缘和标签的左边缘之间的空间应保持不变。
另外，第二行不应水平居中，而应从单选按钮下方开始。

以下是该问题的一个简单示例： http://codepen.io/KristjanLaane/pen/ryQZoM

HTML

<body>
  <div>
    <input id="radio1" type="radio" name="choice">
    <label for="radio1">Lorem ipsum dolor sit amet.</label>
  </div>
  <div>
    <input id="radio2" type="radio" name="choice">
    <label for="radio2">Phasellus rutrum scelerisque. Aenean longwordhere tomakethepoint ultricies.</label>
  </div>
  <div>
    <input id="radio3" type="radio" name="choice">
    <label for="radio3">Cras auctor justo metus.</label>
  </div>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div {
  border: 1px solid blue;
}

label {
  background: yellow;
  font-size: 25px;
}

【问题讨论】：

可能通过固定div 的宽度。
单独使用 CSS 是不可能的……这不是 line-box 模型的工作方式。
这可能会让你更接近 - codepen.io/Paulie-D/pen/KWrGxm
@Paulie_D 据我所知，将 flex:0 0 auto 添加到输入会使单选按钮垂直居中，但目的是使单选按钮及其标签水平居中。你可能已经知道了:)
@Paulie_D 那么可能是一个javascript解决方案吗？

标签： html css layout text flexbox

【解决方案1】：

使用word-break: break-all;打破冗长的单词以覆盖空白区域

label {
    background: yellow;
    font-size: 25px;     
    word-break: break-all;
  }

DEMO

【讨论】：

其实这不是 OP 想要的。
是的，不幸的是，不希望逐个字母打破文本