<tr> nimmt nicht die Höhe des Nachkommen <span>

Diese <tr> nimmt nicht die Höhe des Nachfahren <span> und einige der Textüberläufe in die nächste Zeile. Wie kann ich die Zeile so erweitern, dass sie sowohl den Text als auch die Beschriftung enthält?<tr> nimmt nicht die Höhe des Nachkommen <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>

Aktuelle Tabelle:

Gewünschte Tabelle:

Quelle

2017-02-15 Brian

Ist es möglich, in einem kompletten Arbeits EXA zu bearbeiten mple? Es ist schwer zu sehen, was Sie meinen, ohne den tatsächlich generierten/wiedergegebenen HTML/CSS-Code. Siehe [Erstellen eines minimalen, vollständigen und überprüfbaren Beispiels] (http://stackoverflow.com/help/mcve). – showdev

Versuchen Sie, "Anzeige: Inline-Block" zum Stil der span hinzuzufügen –

Es ist wie die Klasse sieht .mdl_checkbox hat eine feste Höhe von 24px (material.indigo-pink.min.css). Diese Klasse wird auf das Element <label> angewendet. Das Überschreiben dieses Stils schien zu helfen.

Aber ich bin mir nicht sicher, wie das andere Elemente beeinflussen wird. Vielleicht bietet "Material Design Lite" eine eher integrierte Lösung, anstatt bestehende Stile einfach zu überschreiben.

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>

Quelle

2017-02-15 20:45:53 showdev

Zum einen fügen overflow:hidden zum <tr>, überquellenden Inhalt zu verbergen, und wenn Sie benötigen Inhalt innerhalb des on speichern e Reihe, versuchen Sie dies:

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 
}

Quelle

2017-02-15 20:25:28

<Label>, <Spannweite> Elemente Inline-Eigenschaft sind. Sie können also keine Blockeigenschaft wie <p> haben. Bitte schauen <Label> spec here und <Spanne> spec here

Sie müssen zuerst Elemente fixieren, dann padding oder Höhe > dann geben in < Spanne geben 'display: inline-block' in <Spanne>

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>

Quelle

2017-02-15 21:02:01 Victoria

<tr> nimmt nicht die Höhe des Nachkommen <span>

Antwort

Verwandte Themen