<tr>不取后代身高<span>

Question

此<tr> 未采用后代<span> 的高度，一些文本溢出到下一行。如何使该行展开以包含文本和标题？

<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>

当前 Table:

想要Table：

Answer 1

首先在<tr>中添加overflow:hidden，隐藏溢出的内容，如果需要将内容存储在一行内，试试这个：

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 2

看起来 class .mdl_checkbox 的高度固定为 24px (material.indigo-pink.min.css)。 class 应用于 <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>

Answer 3

, 元素是内联的属性。所以他们不能像

那样有块属性。请查看规范 here, and <span> spec here

您需要先固定元素，然后在中给出 padding 或 height 然后在中给出 'display:inline-block'

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;
}

<!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>

<tr>不取后代身高<span>

<tr> does not take the height of descendent <span>

html

css

reactjs

material-design-lite