Question

这个<tr>没有占据后代<span>的高度，一些文本溢出到下一行。如何将行展开以包含文本和标题？

＆＃13;

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.green-red.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<table class="mdl-data-table">
  <tbody>
    <tr>
      <td class="mdl-data-table__cel--non-numeric">
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
          <input type="checkbox" class="mdl-checkbox__input" />
          <span class="mdl-checkbox__label">
            <p class="mdl-typography--body-1 mdl-typography--text-left">Barack H. Obama</p>
            <p class="mdl-typography--caption mdl-typography--text-left">Democratic</p>
          </span>
        </label>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

当前表：

所需表：

Answer 1

＆lt; label＆gt;，＆lt; span＆gt;元素是内联属性。所以他们不能像＆lt; p＆gt;那样拥有阻止属性。请查看＆lt; label＆gt; spec here和＆lt; span＆gt; spec here

您需要先修复元素，然后在＆lt; span＆gt;中给出填充或高度。然后给出显示：inline-block＆＃39;在＆lt; span＆gt;

中

＆＃13;

label{
  display:block;
  padding:20px 0;
}
.mdl-checkbox__label{
  display:inline-block;
  vertical-align:top;
}

.mdl-typography--body-1{
  display:block;
  padding:0 0 20px;
}
.mdl-typography--caption{
  display:block;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table class="mdl-data-table" border=1>
  <tbody>
    <tr>
      <td class="mdl-data-table__cel--non-numeric">
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
          <input type="checkbox" class="mdl-checkbox__input" />
          <span class="mdl-checkbox__label">
            <span class="mdl-typography--body-1 mdl-typography--text-left" >
              Barack H. Obama
            </span>
            <span class="mdl-typography--caption mdl-typography--text-left" >
              Democratic
            </span>
          </span>
        </label>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

＆＃13;

Answer 2

首先将overflow:hidden添加到<tr>，以隐藏溢出的内容，如果您需要将内容存储在一行内，请尝试以下操作：

label {
   display: flex;
   flex-wrap: nowrap;
}

label .mdl-checkbox__input {
   flex-basis: 20%;
}

label .mdl-checkbox__label {
   flex-basis: 80%;
   overflow: hidden;
   text-overflow: ellipsis; //will cut the word with ..., if it too long
   line-height: //your value
}

Answer 3

看起来类.mdl_checkbox的固定高度为24px（material.indigo-pink.min.css）。该类适用于<label>元素。压倒那种风格似乎有所帮助。

但我不确定这会如何影响其他元素。也许“Material Design Lite”提供了更加集成的解决方案，而不仅仅是覆盖现有的样式。

label.mdl-checkbox {
  height: auto;
}

<link href="//code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />
<script defer src="//code.getmdl.io/1.3.0/material.min.js"></script>
<table class="mdl-data-table">
  <tbody>
    <tr>
      <td class="mdl-data-table__cel--non-numeric">
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
          <input type="checkbox" class="mdl-checkbox__input" />
          <span class="mdl-checkbox__label">
            <p class="mdl-typography--body-1 mdl-typography--text-left">Barack H. Obama</p>
            <p class="mdl-typography--caption mdl-typography--text-left">Democratic</p>
          </span>
        </label>
      </td>
    </tr>
  </tbody>
</table>

没有采取后代<span>的高度

3 个答案: