Create a circle out of texts with CSS or CSS and Javascript

admin

Administrator
Staff member
<a href="https://jsfiddle.net/KiranKumarDash/2usjbynf/" rel="nofollow noreferrer">FIDDLE</a>

I am willing to create a circle out of texts. So, I am having a list of anchor tags in a div. I created a circle using the basic properties but the anchor tag does not stay in it and tend to acquire the whole width of parent div.

What I can do is use: overflow:hidden to hide the overflowing parts from the circle but what I rather wish is to adjust the anchor tags properly inside the circle without cutting any portion of it.

Please suggest if any one has gone through such case with or without using javascript. Here is the <a href="https://jsfiddle.net/KiranKumarDash/2usjbynf/" rel="nofollow noreferrer">FIDDLE</a>.

<strong>HTML:</strong>

Code:
&lt;div class="tag-cloud"&gt;
    &lt;div class="tt"&gt;
        &lt;a href="http://localhost/ameno/tag/8bit/" class="tag-link-66" title="1 topic" style="font-size: 8pt;"&gt;8BIT&lt;/a&gt;
        .................................................
        &lt;a href="http://localhost/ameno/tag/wordpress-tv/" class="tag-link-174" title="2 topics" style="font-size: 10.709677419355pt;"&gt;wordpress.tv&lt;/a&gt; &lt;/div&gt;
&lt;/div&gt;

<strong>CSS:</strong>

Code:
.tag-cloud {
    width: 300px;
    height: 300px;
}

.tt {
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background: #000;   
}

.tag-cloud a {
    color: red;
    display: inline-block;
}

What I have tried:

<a href="http://www.csstextwrap.com/" rel="nofollow noreferrer">http://www.csstextwrap.com/</a>

But that works only for a limited amount of text. And if I add some more text it is not good any more.

Expected result:

<a href=" " rel="nofollow noreferrer"><img src=" " alt="enter image description here"></a>