Question

昨天我在这个多行复选框上遇到垂直对齐问题。一旦它工作，我试图通过填充放入的容器并将文本溢出的椭圆应用于3个文本标签来使其有所响应。这没用。

HTML（一旦显示问题得到解决，内联css将被移动到scss）

<label style="margin-bottom:25px; display:table; table-layout:fixed;" title="checkbox">
  <div style="display:table-cell; width:34px">
    <span class="fancy-checkbox-multiline">
    <input type="checkbox" value="box">
    <span class="box">
        <span class="checker">
            <span class="mark"></span>
    </span>
    </span>
    </span>
  </div>
  <div style="display:table-cell; vertical-align:top; width:100%">
    <div style="display:table; table-layout:fixed;">
      <div style="display:table-cell; font-size:12px; line-height:12px; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">
        This is the Primary label
      </div>
    </div>
    <div style="display:table; table-layout:fixed;">
      <div style="display:table-cell; font-size:10px; line-height:12px; max-width:50%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">
        This is the 2nd label
      </div>
      <div style="display:table-cell; font-size:10px; line-height:12px; padding-left:10px; max-width:50%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">
        This is the 3rd label
      </div>
    </div>
  </div>
  <div style="display:table-cell; padding-left:20px; line-height:24px;">55
  </div>
</label>

此时我的主要问题已成为：是否有更好的方法来获取格式化此复选框然后使用css表？

这是一个新的JSfiddle https://jsfiddle.net/PolishVendetta/3s7kxta4/13/

CSS表格为多行复选框的文本溢出问题

0 个答案: