CSS3-Kreis mit text-wrap

Ist es möglich einen Kreis zu zeichnen mit -webkit-border-radius in CSS3, während die Messung der Breite und Höhe auf bestimmten Variablen (wie height:100px und width:100px) also, wenn text Hinzugefügt wird, innerhalb des Kreises den text umschließt, stattdessen zwingen Sie die Größe des Kreises ändern?

wenn die Größe, der Inhalt ändert, wird das element ändern, wenn nötig.
overflow:hidden ?
Aber Sie können tun, einen SVG-Kreis, mit foreignObject für HTML-Inhalt. Diese Weise, die Sie tun können Vektor-und wrap in der gleichen Zeit ...

InformationsquelleAutor TronCraze | 2011-08-14

  1. 3

    Wenn Sie möchten, behandeln Sie diese mit nur CSS und machen Sie sensibel, es nicht möglich in die Weg Sie möchte.

    Aber es kann getan werden, mit einigen eher mühsam JavaScript.

    Ich drei alternativen.

    1. CSS nur unvollkommen Lösung.

       _-==-_
 -@@@@@@@@-
- @      @ -
| @      @ |
- @      @ -
 -@@@@@@@@-
   -.__.-

    Welche mathematisch, 14.65% des radius auf jeder Seite (die die gleiche wie die Breite oder Höhe), vorausgesetzt, ein perfekter Kreis.

    Vergessen Sie nicht, die Polsterung im inneren ein element ist relativ zu dem container die Breite, so padding: 14.65% funktioniert nicht , es sei denn, der Kreis ist in ein element mit der gleichen Breite.

    2. JavaScript.

    Font-Charaktere haben unterschiedliche Größen. Um dies zu tun, müssen Sie entweder:

    • eine monospace (oder enge) Schrift.
    • zu kommen mit einem Skript zum berechnen der Breite on-the-fly.

    Das Skript kann dies tun, indem er eine inline-block-element mit der CSS - display: pre; zum berechnen der Breite aller Haltepunkte (D. H. Worten). Auf die browser-Größe, die Sie verwenden würden, diese Breite zu berechnen, wie viele kann man in jeder Zeile.

    Jedoch, jede Zeile eine andere Länge in einem Kreis, so müssten Sie die arbeiten aus der line-height, der Kreis, die Höhe und die Anzahl der Linien an, wie weit die mit Zeile wäre.

    Dies ist nicht ein langwieriger Prozess, aber damit onresize problematisch sein würde, so würde ich raten, entweder mit fixen Verhältnis Größenanpassung der schriftart,-Größe und die Kreis-Größe, so dass Sie nicht haben, zu wiederholen es alle.

    Alternativ ein anderer Weg, um die Größe des Kreises, nachdem es erzeugt worden waren, die auf Last, sich eine CSS3-Transformation mit einem Skalierungsfaktor.

    3. HTML-Canvas + JS

    Könntest du eine Leinwand statt, wie pro die Lösung unten? Es wäre viel einfacher. Selbst dann, die Breite des Textes berechnet wird, aber wahrscheinlich ist viel schneller als das laden jedes Wort in ein inline-block in der DOM.

    Umbrechen von text um einen Kreis Form im svg-oder canvas

    InformationsquelleAutor Tom Golden

  2. 0

    Gibt es keinen Weg, um das element tatsächlich kreisförmig sein, sondern Sie können auf jeden Fall machen, den Kreis von set-Größe und der text passen in das größte Quadrat, das würde passen in den Kreis mit padding:

    http://jsfiddle.net/pk7yk/2/

    (Beispiel funktioniert nur in WebKit-Browsern)

    Obwohl Sie tun müssen, um sicherzustellen, es ist nicht zu viel text in den Kreis zu passen.

    InformationsquelleAutor Robin Winslow

  3. 0

    Ist es möglich, wickeln Sie text in einem Kreis erstellt mit css3 border-radius.
    Sie müssen nur die Polsterung Betrag an die Grenze radius

    zB:

    border-radius ist die Breite/Höhe geteilt durch 2. Das element muss sein
    ein perfekter Platz um einen perfekten Kreis. dann fügen Sie die Polsterung amt zu
    die border-radius -

    CSS:

    .testCircle{
   width:200px; 
   height:200px;
   border-radius:150px;
   background-color:#333;
   padding: 50px;
}

    HTML:

    <div class="testCircle">
      Text inside a circle
</div>

    Dadurch wird der text zu umbrechen, innerhalb des Kreises. Getestet in FF.
    Zu wissen, mehr über das erstellen von Kreisen mit css3
    css Kreis mit text verpackt im inneren.

    P. S Du musst vorsichtig sein, über die Ecken, obwohl Sie seine Blicke kreisförmige element ist eigentlich die box so geformt, haben eine angenehme Polsterung, so dass der text in den Ecken platziert.

    InformationsquelleAutor krishna sagar

Schreibe einen Kommentar