Wenn der Inhalt der Bootstrap-Tabelle zu lang ist, verwenden Sie Auslassungspunkte, um eine detaillierte Erklärung anzugeben

Dieser Artikel stellt hauptsächlich die Lösung vor, Ellipsen zu verwenden, um anzuzeigen, wann der Inhalt der Bootstrap-Tabelle zu lang ist. Ich hoffe, dass es allen helfen kann.

Wenn der td-Inhalt im Bootstrap die von mir angegebene feste Breite überschreitet, lautet der durch Auslassungspunkte ersetzte Code zunächst wie folgt:

[Ähnliche Videoempfehlungen: Bootstrap Tutorial】

<table class="table table-bordered">
   <thead>
     <tr>
       <th class="center" style=&#39;width:38%;&#39;>商品名称</th>
       <th class="center" style=&#39;width:36%;&#39;>详细介绍</th>
       <th class="center" style=&#39;width:22%;&#39;>购买数量</th>
     </tr>
   </thead>
   <tbody id="tbody">
     <tr>
      <td>自由行机票享超值优惠</td>
      <td>随心所欲安排行程</td>
      <td>70</td>
    </tr>
    <tr>
      <td>自由行机票享超值优惠</td>
      <td>随心所欲安排行程</td>
      <td>70</td>
    </tr>   
    <tr>
      <td>自由行机票享超值优惠</td>
      <td>随心所欲安排行程</td>
      <td>70</td>
    </tr>            
   </tbody>               
 </table>
.table tbody tr td{
   overflow: hidden; 
   text-overflow:ellipsis; 
   white-space: nowrap; 
 }

Der Anzeigeeffekt des mobilen Simulators ist wie folgt. Es ist nicht sehr komfortabel. Es wird nicht in der Breite angezeigt, die ich ihm gegeben habe. Es wird alles durch den Inhalt verdrängt.

Lösung:

<table class="table table-bordered" style=&#39;table-layout:fixed;&#39;>

Das heißt, Stil hinzufügen

table{
 table-layout:fixed;
}

Der Effekt erscheint:

table-layout wird verwendet, um Algorithmusregeln für Tabellenzellen, Zeilen und Spalten anzuzeigen. Wert Beschreibung

automatische Standardeinstellung. Die Spaltenbreite wird durch den Zelleninhalt festgelegt.
Die feste Spaltenbreite wird durch Tabellenbreite und Spaltenbreite festgelegt.
inherit gibt an, dass der Wert des Tabellenlayout-Attributs vom übergeordneten Element geerbt werden soll.

Verwandte Empfehlungen:

CSS begrenzt die Anzahl der angezeigten Wörter und verwendet Ellipsen, um überschüssige Zeichen anzuzeigen

So verstecken Sie sich zusätzliche Wörter mit Ellipsen Ersetzen Sie

CSS-Schreibmethode für mehrzeilige Ellipsenkompatibilität

Das obige ist der detaillierte Inhalt vonWenn der Inhalt der Bootstrap-Tabelle zu lang ist, verwenden Sie Auslassungspunkte, um eine detaillierte Erklärung anzugeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!