Wrapping a text around a circular element
See this post by Chris Coyier in which he separates each character of text into <span>s and rotates each one in turn using CSS rotation:
.char1 {
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.char2 {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
...etc
Or use Dirk Weber's csswarp.js Service which pretty much does the same but uses javascript to generate the html and css for you. (csswarp.js on GitHub)
Or use SVG text on a path as in this example from useragentman.com
<svg id="myShape" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1"
fill="none" stroke="black" stroke-width="1"
d="M 212,65
C 276,81 292,91 305,103 361,155
363,245 311,302 300,314 286,324
271,332 248,343 227,347 202,347
190,346 174,343 163,339 143,333">
</path>
</defs>
<text id="myText">
<textPath xlink:href="#path1" >
<tspan dy="0.3em">C is for Cookie, That's Good Enough For Me!</tspan>
</textPath>
</text>
</svg>
Or...
Use an image.
How do I get text wrap in a circle shape?
You can use the transform(rotate) in css3 to do this.
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>CSS: wrapping around text inside a drawn circle using CSS
The line-height is causing this. I've adjusted your CSS.
circle span {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 90px;
}
circle {
background: #f00;
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
text-align: center;
margin: 5px;
position: relative;
}<circle><span>Text 1</span></circle>
<circle><span>Text 2 and more</span></circle>
<circle><span>Text 3</span></circle>Wrapping text in a circle
SVG doesn't provide text wrapping, but using foreignObject you can achieve a similar effect. why don't you try using foreignObjects. You can read more about it here https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject, by using it i was able to wrap the text as per you requirement, please have a look at the below working snippet.
svg {
width: 700px;
height: 200px;
background-color: #000;
padding: 50px;
}
.circle {
background-color: rgb(119, 119, 119);
height: 100%;
border-radius: 100%;
text-align: center;
line-height: 200px;
font-size: 30px;
}
.circle span {
color: black;
line-height: normal;
display: inline-block;
vertical-align: middle;
font-family: sans-serif;
font-size: 18px;
padding: 20px;
}<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="200" height="200" x="0" y="0">
<div class="circle">
<span>paragraph</span>
</div>
</foreignObject>
<foreignObject width="200" height="200" x="250" y="0">
<div class="circle">
<span>Here is a paragraph</span>
</div>
</foreignObject>
<foreignObject width="200" height="200" x="500" y="0">
<div class="circle">
<span>Here is a paragraph that requires word wrap</span>
</div>
</foreignObject>
</svg>CSS wrap text around centred image
Question resolved :
Actual situation :
The CSS shape works for float, so it's not for centered images now. This property works only for Chrome and Opera at the moment.
Maybe there will be a solution for non float elements in the future. Look at this W3C editor's draft : http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html
A hand made CSS solution :
Basically, there are 2 columns (like in newspapers). The text begins in the left column and goes down. The text continues on the top of the right column and goes down. The columns are a bit higher than the image. The left column has a half invisible circle as well as the right column - on the position of the centered image. The two half circles are build by multiple boxes of different length, they are invisible. (The hight of the boxes is the height of the font.) The text must be justified. The text is now flowing around the half circles in each column. The image will be positioned over the 2 invisible half circles.
Another, not very technical solution is to use Libre Office and Inkscape to produce an SVG file.
Import the picture into Libre Office - wrap the text around the image - save as PDF - open Inkscape - save as SVG - import the SVG in your Webpage - done.
Thanks everybody for helping me and for your inputs !
How to wrap text around a shape with border-radius?
UPDATE
Here is a better version using flexbox that will avoid setting any fixed height but require an extra container. The drawback is that part of the text may still overflow. We need to adjust the height accordingly to avoid this:
p {
overflow: hidden;
text-align: justify;
margin: 0;
height:135%; /* we need to adjust this */
border-bottom-right-radius: 100%;
border: 1px solid;
}
p:after {
content:"last";
color:red;
}
p::before {
content: "";
float: right;
width: 100%;
height: 100%;
shape-outside: radial-gradient(farthest-side at top left, transparent 99%, #fff 100%);
}
.box {
display: flex;
}<div class="box">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. At vero eos et accusamus et iusto odio dignissimos ducimus
qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum
quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem
quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur
aut perferendis doloribus asperiores repellat.
</p>
</div>
</div>How to wrap text around circular carousel?
You can use the shape-outside CSS property define a circular shape on your image so that the inline text next to it flow around the shape like this:
.shape-circle {
shape-outside: circle(50%);
padding-right: 1em;
}<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" media="screen" />
<div class="w-100">
<div id="circle-wrap"><img align="left" class="curve img-fluid img-profile rounded-circle mx-auto mb-2 shape-circle" src="https://picsum.photos/300/300" alt="Sample Image">
<h4 align="left" class="mb-0"><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
</div>
</div>Wrap Text in a Circle Shape Using HTML CSS
Adding style="transform: rotate(-55deg); transform-origin: center;" to your SVG text seems to work:
.svg {
fill: currentColor;
height: auto;
max-width: 66vmin;
transform-origin: center;
width: 135px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="text-black">
<fieldset>
<div class="bg-gray-200 p-4 mt-2 items-center flex grid grid-cols-5 gap-x-4 gap-y-8 sm:grid-cols-5 sm:gap-x-6 lg:grid-cols-5 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">
<!--new -->
<div class="relative h-full flex justify-center items-center">
<label data-id="Rosehip Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute" viewBox="0 0 100 100" width="100" height="100">
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="10" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full">
<img src="https://selection-app.netlify.app/assets/thumbnails/Marula-Oil.png" class="rounded-full" alt="Sample Image">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute bottom-0" data-id="Rosehip Oil">
<div class="flex justify-center transform -translate-y-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white mt-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<!-- <span class="absolute inline-flex items-center p-2 rounded-full text-xs font-medium bg-black text-white mb-2 hidden"> $10 </span> -->
<span class="absolute text-xs sm:text-sm font-medium text-white bottom-0 mt-2"> Smooth </span>
</div>
</div>
<div class="flex justify-center mt-5 mb-5 remove_preview_oil_btn hidden">
<span class="">
<button type="button" class=" border border-red-600 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Remove from cart</button>
</span>
</div>
</fieldset>
</div>Related Topics
Make CSS Apply Only for Opera 11
How to Disable Margin Collapse Between Sibling Elements
Rounding Numbers in SASS and Adjusting the Amount of Decimals
CSS Padding Overrides Overflow
Custom List Style for Ordered Lists
CSS Flex, How to Display One Item on First Line and Two on the Next Line
Fluid Container in Bootstrap 3
How to Change Navbar/Container Width? Bootstrap 3
What Are Most Useful Media="Print" Specific, Cross Browser Compatible CSS Properties
What Is That Thing Between CSS "Selectors" Called
Inherited Text-Decoration Style
How to Float Text Around Image in React Native