中心溢出文本容器

时间：2017-03-30 12:10:50

标签： html css layout text flexbox

enter image description here

如图所示，我需要摆脱粗略用红色圆圈表示的区域。目的是将第二个单选按钮水平居中，其标签类似于上方和下方的标签。这个额外的不受欢迎的宽度是由于文本溢出而导致的，当没有足够的宽度可以在一行上时，字断开到下一行。

  • 请注意，目标是将单选按钮和标签对齐在一起，即单选按钮右边缘和标签左边缘之间的空间应保持不变。
  • 此外，第二行不应该水平居中，而是从单选按钮下方开始，因为它已经是。

以下是该问题的准系统示例： 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;
}

1 个答案:

答案 0 :(得分：0)

使用word-break: break-all;

打破冗长的单词以覆盖空白区域 
label {
    background: yellow;
    font-size: 25px;     
    word-break: break-all;
  }

<强> DEMO

相关问题
最新问题