html - 如何在弹出框内给出正确的尺寸？

Question

我正在尝试在弹出窗口中插入一个表单(我正在使用 Bootstrap，但即使使用手工制作的简单 CSS 网格也可以重现该问题)。

.popover
  form.form-horizontal
    .form-group
      label.col-sm-2.control-label(for='inputEmail3') Email
      .col-sm-10
        input#inputEmail3.form-control(type='email', placeholder='Email')

http://codepen.io/FezVrasta/pen/GpoxZz

问题是当在弹出窗口中时，表单无法正确设置其大小，然后我得到了一些不需要的效果。
例如，标签以及没有 CSS 定义的宽度的任何其他元素被剪切。

标签被剪掉了

我无法使用 CSS 设置宽度，因为在我的应用中，标签是由后端生成的，我不知道它们的长度。
如果不通过 CSS 手动设置 width 如何避免表单太薄？

Clarification

I'm not trying to fix just this little silly problem, I'm trying to understand why this happens and I want to find a reliable solution to the problem.

Please don't post answer asking me to use javascript, adding paddings, setting widths and so on. Thanks!

Answer 1

我认为您可以尝试的一种非常快速的解决方案是添加 word-break CSS 属性。

CODEPEN

.popover {
  display: block;
  max-width: initial;
  margin: 20px;
}
.popover .form-horizontal .form-group {
  margin-left: 0;
  margin-right: 0;
}
.popover .form-horizontal .control-label {
  padding-right: 0;
  padding-left: 0;
}
.popover .col-sm-2 {
  word-break: keep-all;
}

在这种情况下，您不必修改宽度属性。请记住 word-break does not work使用较旧的 Opera 浏览器。

仍然建议您更改标签和输入字段的大小，因为您现在的标签(由 Bootstrap 类设置)占总宽度的 16%，而输入占宽度的 83%。无论如何，我希望它能帮到你。

--编辑--

我知道您不想调整对象的宽度，但除了修改它我找不到任何其他解决方案。我创建了一个小的 JS 代码来检查标签中有多少字符并更改标签和输入字段的宽度。或许您可以尝试类似的方法。

CODEPEN

var labelText = $(".test").text()
var lengthLabel = labelText.length;

if(lengthLabel > 6){
  $('.popover .form-horizontal .control-label').css('width','40%');
  $('.popover .col-sm-10').css('width','60%');
}