Is it possible to combine the two?

I have a tag cloud, the size of the text increases with the views, the more a tag is viewed the more the text size increases.

For clarity of reading, each tag has a border and nowrap text.

Unfortunately sometimes the tag text can be long and be viewed many times, so it becomes large, larger than the div or viewport.

Is there a way via css to say: ok, nowrap, but if too long, reduce the size of the text to make it max 100% of the div large?

```
<style>
div#tagcloud{text-align:center;width:300px;border:1px solid #999;}
div#tagcloud a{text-decoration:none;}
.smallest{font-size:.9em;border:1px solid red;border-radius:5px;padding:2px 5px;white-space: nowrap;line-height:2em;}
.small{font-size:1.5em;border:1px solid red;border-radius:5px;padding:2px 5px;white-space: nowrap;line-height:2em;}
.medium{font-size:1.8em;border:1px solid red;border-radius:5px;padding:2px 5px;white-space: nowrap;line-height:1.8em;}
.large{font-size:2.2em;border:1px solid red;border-radius:5px;padding:2px 5px;white-space: nowrap;line-height:1.8em;}
.largest{font-size:2.5em;border:1px solid red;border-radius:5px;padding:2px 5px;white-space: nowrap;line-height:1.5em;}
</style>
<div id="tagcloud">
<a href="#"><span class="smallest">Tag text</span></a>
<a href="#"><span class="smallest">Tag text</span></a>
<a href="#"><span class="medium">Tag text</span></a>
<a href="#"><span class="large">Tag text</span></a>
<a href="#"><span class="smallest">Tag text</span></a>
<a href="#"><span class="small">Tag text</span></a>
<a href="#"><span class="large">Tag text</span></a>
<a href="#"><span class="smallest">Tag text</span></a>
<a href="#"><span class="medium">Tag text</span></a>
<a href="#"><span class="smallest">Tag text</span></a>
<a href="#"><span class="large">Tag text</span></a>
<a href="#"><span class="largest">I am a very long tag unfortunately also viewed many times</span></a>
<a href="#"><span class="large">Tag text</span></a>
<a href="#"><span class="smallest">Tag text</span></a>
<a href="#"><span class="medium">Tag text</span></a>
<a href="#"><span class="smallest">Tag text</span></a>
<a href="#"><span class="small">Tag text</span></a>
<a href="#"><span class="smallest">Tag text</span></a>
<a href="#"><span class="medium">Tag text</span></a>
<a href="#"><span class="smallest">Tag text</span></a>
<a href="#"><span class="large">Tag text</span></a>
</div>

```

<https://jsfiddle.net/v8rmzgwc/3/>