CODEWITHSUNDEEP
htmlcss
Shani Mughal
Shani Mughal

Reputation: 105

Text exceeds the circle boundry in html

I am making a circle with text in it, but the problem is when i write some text it exceeds the circle boundry. Please have a look at this pic:

enter image description here

Following is my code

 <svg  width="200" height="200" style = "border-style: solid; border-color: #696969;border-radius:50%;border-width: 8px;">
    
    <circle cx="125" cy="125" r="100" fill="white"   />
    
    <text padding-right= "80px" x="30%" y="30%" text-align= "center"  font-size="20px" font-family="Arial" dy=".3em">Place the text here</text>
    </svg>

Upvotes: 2

Views: 64

Answers (2)

Udhay Titus
Udhay Titus

Reputation: 5869

change x and y percentage value in <text/> it will works

<svg  width="200" height="200" style = "border-style: solid; border-color: #696969;border-radius:50%;border-width: 8px;">

<circle cx="125" cy="125" r="100" fill="white"   />

<text padding-right= "80px" x="10%" y="35%" text-align= "center"  font-size="20px" font-family="Arial" dy=".3em">
 <tspan x="10%" dy=".6em">Place the text here</tspan>
 <tspan x="10%" dy="1.1em">Place the text here</tspan>
  <tspan x="10%" dy="1.1em">Place the text here</tspan>
</text>
</svg>

Upvotes: 1

Nisharg Shah
Nisharg Shah

Reputation: 19542

Change your X and Y by 10% and 45% and you can also play with this values

<svg width="200" height="200" style="border-style: solid; border-color: #696969; border-radius:50%; border-width: 8px;">
    <circle cx="125" cy="125" r="100" fill="white">
    <text padding-right="80px" x="10%" y="45%" text-align="center" font-size="20px" font-family="Arial" dy=".3em">Place the text here</text>
</svg>

Upvotes: 0

Related Questions