HTML/CSS: Wie kann man die folgende Ausrichtung der Mittelklasse erreichen?

StackOverflow https://stackoverflow.com/questions/4776453

Frage

Kurzversion

Ich möchte Text in einem Element (feste Breite) so positionieren, dass es, wenn es kurz genug ist, zentriert ist, aber wenn es zu lang ist, um zu passen, wird es links ausgerichtet und das Ende des Textes wird abgeschnitten (über overflow: none). In diesem Fall gibt es einen Tooltip (über title="") mit dem vollen Text. Wie kann ich es tun?

Komplette Version

Das Element, auf das ich mich beziehe, ist ein Titel unter einem Bild. Da es nebeneinander viele Bilder gibt, möchte ich nicht, dass sich die Titel überlappen oder so (sie sind absolut unter dem Bild mit fester Breite und Höhe positioniert). Für einen Titel wird es besser aussehen, wenn es zentriert ist, aber eine lange Saite mit overflow:none Das wird beide Enden abgeschnitten, weil die Zentrierung schlecht aussieht. Derzeit habe ich das:

<div class="ImageTitle">
    <table style="margin: auto">
        <tr><td title="The title">The title</td></tr>
    </table>
</div>

Das ist hackisch, um es gelinde auszudrücken, aber ich kann es nicht mit einfacher zum Laufen bringen DIVs und SPANs. Irgendwelche Ideen?

War es hilfreich?

Lösung

Ich denke, dass dies tun sollte, was Sie wollen:

div.ImageTitle {
    width: 100px; /* or whatever */
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
}

JS Fiddle Demo.

Beachten Sie, dass ich die Entfernung der (unnötig table) Wenn die Tabelle immer noch da ist, wird das CSS die der von der von der von dem überschreiben div.imageTitle.

Während das nicht bedingt zuweisen text-align: center oder text-align: left, das Vorherige (text-align: center;) bewegen sich einfach von der Mitte des Elements zum linken Rand des Elements (es sei denn text-direction ist auf etwas anderes als eingestellt ltr) und überschwingen auf der rechten Seite. Um sicherzustellen, dass es nur in einer Zeile bleibt, habe ich verwendet white-space: nowrap Um das Verpackung zu entfernen.

Für den Tooltip fürchte ich das Muss in der hartcodiert sein div (oder welches andere Element Sie verwenden), da es keine Möglichkeit gibt, HTML zu verwenden, damit es mit if/sonst statemnts funktionieren kann. Wenn Sie bereit sind, JavaScript zu verwenden, ist es möglich, aber nicht mit nur HTML/CSS.

Andere Tipps

Hilft das? (Es tut mir leid, es ist spät hier, ich bin müde und unkonzentriert)

<!doctype html>
<html>
<head>
<style type="text/css">
.outer {
  max-width: 100%;
  overflow: hidden; 
}
.inner {
  display:inline-block;
  max-width:inherit;
  white-space: nowrap;
  text-align:left;
}
</style>
</head>
<body>
<div style="width:8em;text-align: center; border: 1px solid black">
<div class="outer">
  <span class="inner">
      Short cap
  </span>
</div>
<p />
<div class="outer">
  <span class="inner">
      A very long caption
  </span>
</div>

</div>

Es muss jedoch eine richtige Möglichkeit geben, die Höhe zu reparieren.

Ich denke, der einzige Weg, wie Sie dies tun können, ist mit JavaScript.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top