Wie bekomme ich Textumbruch in einer Kreisform?

Ich möchte Text mit Hilfe von CSS oder JavaScript um ein kreisförmiges Bild wickeln, wie Sie unten sehen können.Wie bekomme ich Textumbruch in einer Kreisform?

#corner { 
 
    border-radius: 100%; 
 
    background: url(https://osiprodwusodcspstoa01.blob.core.windows.net/en-us/media/187a9a09-fb97-4a5e-a8a2-620c782d6c67.png); 
 
    background-position: left top; 
 
    background-repeat: repeat; 
 
    padding: 20px; 
 
    width: 150px; 
 
    height: 150px; 
 
}

<p id="corner"></p>

ich im Internet gesucht haben, aber hilfreich etwas nicht bestraft konnte.

Quelle

2016-03-22 wuqt

Sie können [diese CSS Art und Weise] (https://css-tricks.com/set-text-on-a-circle/) oder SVG verwenden [TextPath Element] (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath) um [den Effekt zu erzeugen] (http://bl.ocks.org/jebeck/196406a3486985d2b92e), den Sie wünschen –

FYR: https://css-tricks.com/set-text-on-a-circle/ –

Sie können dazu die Transformation (rotate) in css3 verwenden.

body{ 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 
#corner{ 
 
    margin-top: 50px; 
 
    background: #92d050; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    -webkit-box-shadow: 0 0 6px 6px #a7c5fb, 0 3px 6px #a7c5fb; 
 
    box-shadow: 0 0 6px 6px #a7c5fb, 0 3px 6px #a7c5fb; 
 
} 
 

 
.contaner { 
 
    position: relative; 
 
    width: 280px; 
 
    margin: auto; 
 
    } 
 
    
 
    span { 
 
     font-family: 'sans-serif', Tahoma, Geneva, Verdana, sans-serif; 
 
    position: absolute; 
 
    color: #f8cbad; 
 
    -webkit-text-stroke: 1px #ed7d31; 
 
    font-size: 30px; 
 
    } 
 
    
 
    .char1 { 
 
    transform: rotate(-90deg); 
 
    left: 26px; 
 
    top: 105px; 
 
    } 
 
    
 
    .char2 { 
 
    transform: rotate(-72deg); 
 
    left: 21px; 
 
    top: 78px; 
 
    } 
 
    
 
    .char3 { 
 
    transform: rotate(-56deg); 
 
    left: 33px; 
 
    top: 58px; 
 
    } 
 
    
 
    .char4 { 
 
    transform: rotate(-56deg); 
 
    left: 44px; 
 
    top: 43px; 
 
    } 
 
    
 
    .char5 { 
 
    transform: rotate(-49deg); 
 
    left: 57px; 
 
    top: 31px; 
 
    } 
 
    
 
    .char6 { 
 
    transform: rotate(-37deg); 
 
    left: 72px; 
 
    top: 18px; 
 
    } 
 
    
 
    .char7 { 
 
    transform: rotate(-32deg); 
 
    left: 82px; 
 
    top: 9px; 
 
    } 
 
    
 
    .char8 { 
 
    transform: rotate(-17deg); 
 
    left: 104px; 
 
    top: 2px; 
 
    } 
 
    
 
    .char9 { 
 
    transform: rotate(-8deg); 
 
    left: 123px; 
 
    top: -1px; 
 
    } 
 
    
 
    .char10 { 
 
    transform: rotate(7deg); 
 
    left: 143px; 
 
    top: 0px; 
 
    } 
 
    
 
    .char11 { 
 
    transform: rotate(13deg); 
 
    left: 161px; 
 
    top: 3px; 
 
    } 
 
    
 
    .char12 { 
 
    transform: rotate(36deg); 
 
    left: 184px; 
 
    top: 18px; 
 
    } 
 
    
 
    .char13 { 
 
    transform: rotate(45deg); 
 
    left: 207px; 
 
    top: 33px; 
 
    } 
 
    
 
    .char14 { 
 
    transform: rotate(68deg); 
 
    left: 224px; 
 
    top: 54px; 
 
    } 
 
    
 
    .char15 { 
 
    transform: rotate(68deg); 
 
    left: 229px; 
 
    top: 69px; 
 
    } 
 
    
 
    .char16 { 
 
    transform: rotate(83deg); 
 
    left: 234px; 
 
    top: 89px; 
 
    } 
 
    
 
    .char17 { 
 
    transform: rotate(90deg); 
 
    left: 239px; 
 
    top: 105px; 
 
    } 
 
    
 
    .char18 { 
 
    transform: rotate(114deg); 
 
    left: 235px; 
 
    top: 133px; 
 
    } 
 
    
 
    .char19 { 
 
    transform: rotate(114deg); 
 
    left: 233px; 
 
    top: 146px; 
 
    } 
 
    
 
    .char20 { 
 
    transform: rotate(122deg); 
 
    left: 222px; 
 
    top: 157px; 
 
    } 
 

 
    .char22 { 
 
    transform: rotate(143deg); 
 
    left: 196px; 
 
    top: 187px; 
 
    } 
 
    
 
    .char21 { 
 
    transform: rotate(132deg); 
 
    left: 211px; 
 
    top: 173px; 
 
    } 
 
    
 
    .char23 { 
 
    transform: rotate(152deg); 
 
    left: 179px; 
 
    top: 196px; 
 
    } 
 
    
 
    .char24 { 
 
    transform: rotate(172deg); 
 
    left: 154px; 
 
    top: 206px; 
 
    } 
 
    
 
    .char25 { 
 
    transform: rotate(178deg); 
 
    left: 131px; 
 
    top: 208px; 
 
    } 
 

 
    .char25d { 
 
    transform: rotate(189deg); 
 
    left: 112px; 
 
    top: 207px; 
 
    } 
 

 
    .char26 { 
 
    transform: rotate(213deg); 
 
    left: 86px; 
 
    top: 198px; 
 
    } 
 

 
    .char27 { 
 
    transform: rotate(219deg); 
 
    left: 79px; 
 
    top: 190px; 
 
    } 
 

 
    .char28 { 
 
    transform: rotate(220deg); 
 
    left: 66px; 
 
    top: 183px; 
 
    } 
 

 
    .char29 { 
 
    transform: rotate(228deg); 
 
    left: 50px; 
 
    top: 171px; 
 
    } 
 

 
    .char30{ 
 
    transform: rotate(241deg); 
 
    left: 44px; 
 
    top: 157px; 
 
    } 
 

 
    .char31{ 
 
    transform: rotate(241deg); 
 
    left: 30px; 
 
    top: 142px; 
 
    } 
 

 
    .char32{ 
 
    transform: rotate(241deg); 
 
    left: 24px; 
 
    top: 127px; 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 
    
 
<div class="contaner"> 
 

 
    <p id="corner"></p> 
 
    <!-- <p>I want to bend my text around the circle.</p> --> 
 

 
    <span class="char1">I</span> 
 

 
    <span class="char2">w</span> 
 
    <span class="char3">a</span> 
 
    <span class="char4">n</span> 
 
    <span class="char5">t</span> 
 

 
    <span class="char6">t</span> 
 
    <span class="char7">o</span> 
 

 
    <span class="char8">b</span> 
 
    <span class="char9">e</span> 
 
    <span class="char10">n</span> 
 
    <span class="char11">d</span> 
 

 
    <span class="char12">m</span> 
 
    <span class="char13">y</span> 
 

 
    <span class="char14">t</span> 
 
    <span class="char15">e</span> 
 
    <span class="char16">x</span> 
 
    <span class="char17">t</span> 
 

 
    <span class="char18">a</span> 
 
    <span class="char19">r</span> 
 
    <span class="char20">o</span> 
 
    <span class="char21">u</span> 
 
    <span class="char22">n</span> 
 
    <span class="char23">d</span> 
 

 
    <span class="char24">t</span> 
 
    <span class="char25">h</span> 
 
    <span class="char25d">e</span> 
 

 
    <span class="char26">c</span> 
 
    <span class="char27">i</span> 
 
    <span class="char28">r</span> 
 
    <span class="char29">c</span> 
 
    <span class="char30">l</span> 
 
    <span class="char31">e</span> 
 
    
 
    <span class="char32">.</span> 
 

 
</div> 
 

 
    
 

 

 

 
</body> 
 

 
</html>

Quelle

2017-12-27 14:42:47

Das sieht aus wie es dauerte lange zu entwickeln ... – doppl3r

Sie können SVG für weniger Code verwenden. –

Was Sie verlangen, ist nicht einfach. Du brauchst eine Funktion, um es zu fälschen. Sie können dies versuchen.

function writeInCircle(phrase, cx, cy, fontSize) { 

    var d = $("<div>").addClass("writeInCircle").appendTo("body") 

    var num = phrase.length 
    var r = num * fontSize/6 

    $(d).css({ 
    position: "absolute", 
    width: (2 * r) + "px", 
    height: (2 * r) + "px", 
    left: (cx - r) + "px", 
    top: (cy - r) + "px" 
    }) 
    for (var i = 0; i < num; i++) { 
    var s = $("<span>").html(phrase.charAt(i)).appendTo(d) 
    a = i/num * 2 * Math.PI 
    var x = cx + r * Math.cos(a) 
    var y = cy + r * Math.sin(a) 
    $(s).css({ 
     "position": "absolute", 
     left: x + "px", 
     top: y + "px", 
     "fontSize": fontSize 
    }) 
    console.log(z.charAt(i) + " " + x + "," + y) 
    } 
} 


z = "This is the text you need" 
cx = 200 
cy = 150 
fontSize = 30 
$(function() { 
    writeInCircle(z, cx, cy, fontSize) 
})

Aber was ich vorschlagen würde, ist ein SVG verwenden. Thay wäre nützlicher, wenn man Text in HTML und JS neu erstellt.

Quelle

2016-03-22 04:31:28

-1

Es gibt 2 Möglichkeiten, eine mit JQuery, in der Sie jedes Zeichen und dann entsprechend wie im Beispiel oben gezeigt und zweiten Weg mit CSS, in dem Sie Klasse zu jedem Zeichen zuweisen und sie einzeln wie unten Code umwandeln werden html

<div id="simple_arc"> 
    <span class='w0'>i</span> 
    <span class='w1'></span> 
    <span class='w2'>w</span> 
    <span class='w3'>a</span> 
    <span class='w4'>n</span> 
    <span class='w5'>t</span> 
    <span class='w6'></span> 
    <span class='w7'>t</span> 
    <span class='w8'>o</span> 
    <span class='w9'></span> 
</div>

css

#simple_arc { 
    display: block; 
     width:306px; 
     height:305px; 
}

CSS für Wörter

#simple_arc>span[class^=w]{ 
        display:block; 
        position:absolute; 
        -moz-transform-origin:50% 100%; 
        -webkit-transform-origin:50% 100%; 
        -o-transform-origin:50% 100%; 
        -ms-transform-origin:50% 100%; 
        transform-origin:50% 100%; 
        } 

#simple_arc span{ 

        font-size:38px; 
        font-weight:regular; 
        font-style:normal; 
        line-height:0.65; 
        white-space:pre; 
        overflow:visible; 
        padding:0px; 
        } 

#simple_arc .w0 { 
        -moz-transform: rotate(-1.14rad); 
        -webkit-transform: rotate(-1.14rad); 
        -o-transform: rotate(-1.14rad); 
        -ms-transform: rotate(-1.14rad); 
        transform: rotate(-1.14rad); 
        width: 21px; 
        height: 24px; 
        left: 42.7px; 
        top: 93.95px; 
        }

Quelle

2017-12-27 12:54:44 cyrus

Sie können dies mit einem <textPath> in SVG tun. Wenn Sie SVG verwenden, müssen Sie den Text nicht in separate Zeichen aufteilen. Der Pfad ist nur ein Kreis, der mit elliptical arc commands geschrieben wird.

<svg viewBox="0 0 400 400"> 
 
    <defs> 
 
    <path id="MyPath" 
 
      d="M 200, 200 
 
      m -100, 0 
 
      a 100,100 0 1,1 200,0 
 
      a 100,100 0 1,1 -200,0 
 
" /> 
 
    </defs> 
 

 
    <text font-family="Verdana" font-size="30" fill="rgb(248,203,173)" stroke="rgb(237,125,49)"> 
 
    <textPath xlink:href="#MyPath"> 
 
     I want to bend my text around the circle. 
 
    </textPath> 
 
    </text> 
 
    <circle fill="none" stroke="rgb(165,195,251)" cx="200" cy="200" r="80" stroke-width="10" filter="blur(3px)" /> 
 
    <circle fill="rgb(146,208,80)" stroke="rgb(169,209,142)" stroke-width="2px" cx="200" cy="200" r="78" /> 
 
</svg>

Quelle

2017-12-27 15:22:20

SVG Ansatz ist einfach und kompakt, aber was ist, wenn Sie etwas flexibler brauchen? Hier ist meine Lösung mit JavaScript.

window.addEventListener('load', wrap); 
 

 
function wrap() { 
 
    var image = document.querySelector('#image-to-wrap'); 
 
    var text = document.querySelector('#wrapping-text'); 
 

 
    var start = -90; 
 
    var angle = 360; 
 

 
    var radius = image.clientHeight/2; 
 
    var centerX = image.getBoundingClientRect().left + radius; 
 
    var centerY = image.getBoundingClientRect().top + radius; 
 
    var characters = text.innerHTML.split(''); 
 
    var step = angle/characters.length - 1; 
 

 
    text.innerHTML = ''; 
 

 
    for (var i = 0; i < characters.length; i++) { 
 
    buildItem(i); 
 
    } 
 

 
    function buildItem(i) { 
 
    var item = document.createElement('span'); 
 
    item.innerHTML = characters[i]; 
 
    text.appendChild(item); 
 
    var w = item.clientWidth; 
 
    var h = item.clientHeight; 
 
    var a = (start + step * i) * Math.PI/180; 
 
    item.style.left = centerX - w/2 + radius * Math.sin(a) + 'px'; 
 
    item.style.top = centerY - h - radius * Math.cos(a) + 'px'; 
 
    item.style.transform = 'rotate(' + a + 'rad)'; 
 
    } 
 
}

#image-to-wrap { 
 
    height: 250px; 
 
    margin: 50px; 
 
    width: 250px; 
 
} 
 

 
#wrapping-text { 
 
    color: MistyRose; 
 
    font-family: serif; 
 
    font-size: 50px; 
 
    -webkit-text-stroke: 1px Salmon; 
 
} 
 

 
#wrapping-text span { 
 
    position: absolute; 
 
    transform-origin: 50% 100%; 
 
}

<img id="image-to-wrap" src="https://upload.wikimedia.org/wikipedia/commons/8/85/Reinel_wind_rose_round.png"> 
 
<p id="wrapping-text">Reinel wind rose round</p>

Quelle

2017-12-29 08:11:23 Sam

Wie bekomme ich Textumbruch in einer Kreisform?

Antwort

Verwandte Themen