Clip lange text in HTML-Tabelle Zellen, zeigen Sie sämtliche Inhalte auf hover

Ich habe eine Tabelle, html-Tabelle, die eine Spalte mit dem Namen "Adresse". Die Adresse enthält, sehr lange strings. Was ich will, ist ich will nur zeigen den ersten 2 oder 3 Worte an die Adresse und wenn ich den Mauszeiger über Sie, es sollte zeigen, vollständige Adresse an. Wie kann ich das mit html-Tabelle?

zeig uns code oder demo oder sonst wie können wir Ihnen helfen!!
Für Ihre erste Anfrage, Verwendung von css overflow: hidden; oder text-overflow: ellipsis;. Ich werde versuchen, deine zweite Anfrage (auf hover)

InformationsquelleAutor Legendary_Hunter | 2015-07-28

CSS:

.cell {
  max-width: 50px; /* tweak me please */
  white-space : nowrap;
  overflow : hidden;
}

.expand-small-on-hover:hover {
  max-width : 200px; 
  text-overflow: ellipsis;
}

.expand-maximum-on-hover:hover {
  max-width : initial; 
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr>
      <th>
        ID
      </th>
      <th>
        Adress
      </th>
      <th>
        Comment
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td class="cell expand-maximum-on-hover">
        A very, very long adress that cannot be showed entirely
      </td>
      <td class="cell expand-small-on-hover">
        A very, very long comment to add more information to the row it belongs to.
      </td>
    </tr>
  </tbody>
</table>

Könnte man beginnen, von dort aus dies ist ein Beispiel, wie max-width kombiniert mit overflow : hidden.

Pass bewegen Sie die Adresse der Zelle, das Ergebnis zu sehen

Es funktioniert, aber die Zelle baut zu viel, dass ich brauchen, ziehen Sie den Inhalt der Zelle mit der Maus nach rechts, um den vollständigen text
aktualisiert, passend zu Ihrem Anwendungsfall.

InformationsquelleAutor Anwar

Lösung:

Verwenden table-layout: fixed so, dass Ihre Tabelle Spalten pflegen Feste Größe
Wickeln Sie den Inhalt in div-Elemente zu manipulieren und Breite und überlauf Eigenschaften

CSS:

/*
 * fixed table layout
 */
table {
  table-layout: fixed;
  width: 400px;
  font: larger monospace;
  border-collapse: collapse;
}
th:nth-child(1) {
  width: 20%;
}
th:nth-child(3) {
  width: 20%;
}
/*
 * inline-block elements expand as much as content, even more than 100% of parent
 * relative position makes z-index work
 * explicit width and nowrap makes overflow work
 */
div {
  display: inline-block;
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
/*
 * higher z-index brings element to front
 * auto width cancels the overflow
 */
div:hover {
  z-index: 1;
  width: auto;
  background-color: #FFFFCC;
}

HTML:

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div>John Smith</div></td>
      <td><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></td>
      <td><div>1-234-567890</div></td>
    </tr>
    <tr>
      <td><div>Jane Doe</div></td>
      <td><div>Suspendisse lacinia, nunc sed luctus egestas, dolor enim vehicula augue.</div></td>
      <td><div>1-234-567890</div></td>
    </tr>
  </tbody>
</table>

Diese Antwort ist toll, aber ich arbeite mit der Tabelle Elemente, die sind sehr lange Fäden, und so, wenn Sie über Ihnen schweben, der text geht Weg vom Bildschirm. Gibt es eine Möglichkeit zu haben, den text bleiben die "Spalte" und Höhe-Weise, im Gegensatz zu der Breite her? Ich habe versucht zu spielen, um mit diesem CSS zu machen, genau das zu tun, aber CSS ist nicht gerade meine Stärke.
Ich kann das nicht testen, aber ein trick ist, ändern Sie die white-space: nowrap zu white-space: normal auf hover. Sollte es Nebenwirkungen, aber ich hoffe, Sie (oder jemand anderes) könnte die Arbeit um Sie herum.
Ich bin nicht besorgt über die Nebenwirkungen auf. Das war genau das was ich brauchte. Aus einem JSFiddle testen Sie es aus, wenn jemand zufällig durch und ist auf der Suche nach etwas ähnliches: jsfiddle.net/kxso85w2/1 Danke für die Hilfe Mann!

InformationsquelleAutor Salman A

Mit Tootips gibt eine Lösung,

HTML:

<html>
  <table border="1" >
    <tr>
      <td>A</td>
      <td><abbr title="Ab df df dfdf df dfdkjf sdfk dfdf">Ab df df</abbr> </td>
    </tr>
    <tr>
      <td>B</td>
      <td><abbr title="Bb df df dfdf df dfdkjf sdfk dfdf">Bb df df</abbr> </td>
    </tr>
  </table>
</html>

InformationsquelleAutor sanjeev shetty

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.