Inline-Verpackung der hyperlink-text im HTML-anchor-tag

Ich versuche zu finden, eine Möglichkeit, den wirklich langen text in einen HTML-link zu wickeln, während Sie mit dem link in einem kompakten Rechteck.

Im wesentlichen, ich möchte dieses:

 mit einem wirklich, wirklich 
Hier ist etwas text lange link umbricht und hier ist noch mehr text. 
um ein Rechteck

Statt:

 Hier ist etwas text wirklich eine sehr lange link umbricht 
um ein Rechteck und hier ist noch mehr text.

Wie kann ich dies tun?

  • Wie kommen Sie unterstreichen nicht zeigen, bis in meinem post? Unterstrichen wird in der Vorschau angezeigt, wenn ich es Bearbeiten...
  • ersetzt unterstreicht mit Fett für jetzt
  • Nun, wenn nur ich könnte dies mit Inhalten, die keine Leerzeichen enthält :*(
InformationsquelleAutor Tony the Pony | 2009-03-14
  1. 10

    Können Sie es tun, wie dieses in Firefox nicht im IE funktioniert aber nicht 🙁

    <p>Here is some text <a href="#">with a really, really long link that wraps</a> around in a rectangle and here is some more text.


<style type="text/css">

a {display: inline-block; max-width: 100px; vertical-align: middle;}

</style>
    • IE FIX: *display: inline; *zoom: 1; es Genagelt! 🙂
    InformationsquelleAutor Greg
  2. 9

    Ich weiß, das ist ziemlich alt, aber es war trotzdem eines der ersten Suchergebnisse, die kam für mich zu dem Thema. Ich fand, dass mit:

    white-space: pre-wrap;

    gezwungen den Anker zu wickeln text um meine Breite Einschränkungen

    InformationsquelleAutor Norrec
  3. 1

    Können Sie display:inline-block; css-Eigenschaft auf Ihren link, der Ihnen genau den Effekt, den Sie wünschen (vergessen Sie nicht, stellen Sie die Breite :).

    display:inline-block ist nicht unterstützt in IE, aber zum Glück für Sie schon jemand getan hat, die harte Arbeit und kommen mit einem workaround hier.

    InformationsquelleAutor Darko Z
  4. 1

    Gewickelt ich mit diesem Thema, weil ich war mit bootstrap und es war standardmäßig diese Einstellung als eine von Stilen

    .dropdown-menu > li > a{
    white-space: nowrap;
}

    Denen gemacht hielt die "word-break" und "Breite" css-Eigenschaften aus tatsächlich die Lösung des Problems

    Also ich musste zunächst festgelegt, dass die white-space-Eigenschaft auf "pre-wrap" statt

    InformationsquelleAutor Suzie K
Schreibe einen Kommentar