CODEWITHSUNDEEP
htmlcss
alebal
alebal

Reputation: 5906

Text nowrap and max-width 100%

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/

Upvotes: 1

Views: 1864

Answers (3)

Amber June
Amber June

Reputation: 376

You can't do conditional statements (if/else) in CSS unless you use CSS Variables, but they aren't widely supported in every browser so it's a risk.

Using Fluid Typography with font-calc to responsively resize the font-size could work, but you'd need to know the minimum and maximum width of your container (and I don't think it'd work well with white-space: nowrap;): https://css-tricks.com/snippets/css/fluid-typography

Looking at your code, I think you're going to have to use JavaScript because you can't achieve this with CSS (yet). Maybe try out this plugin, I've heard good things: http://fittextjs.com

Upvotes: 0

Arun AK
Arun AK

Reputation: 4370

We can use the CSS properties white-space and word-wrap to make it work.

div#tagcloud {
  text-align: center;
  width: 300px;
  border: 1px solid #999;
}

div#tagcloud a {
  text-decoration: none;
}

.smallest {
  font-size: 0.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;
  display: block;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.5em;
}
<div id="tagcloud">
  <a href="#"><span class="smallest">Tag</span></a>
  <a href="#"><span class="smallest">Tag</span></a>
  <a href="#"><span class="medium">Tag</span></a>
  <a href="#"><span class="large">Tag</span></a>
  <a href="#"><span class="smallest">Tag</span></a>
  <a href="#"><span class="small">Tag</span></a>
  <a href="#"><span class="large">Tag</span></a>
  <a href="#"><span class="smallest">Tag</span></a>
  <a href="#"><span class="medium">Tag</span></a>
  <a href="#"><span class="smallest">Tag</span></a>
  <a href="#"><span class="large">Tag</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</span></a>
  <a href="#"><span class="smallest">Tag</span></a>
  <a href="#"><span class="medium">Tag</span></a>
  <a href="#"><span class="smallest">Tag</span></a>
  <a href="#"><span class="small">Tag</span></a>
  <a href="#"><span class="smallest">Tag</span></a>
  <a href="#"><span class="medium">Tag</span></a>
  <a href="#"><span class="smallest">Tag</span></a>
  <a href="#"><span class="large">Tag</span></a>
</div>

Here is the jsFiddle

Hope it helps :)

Upvotes: 2

CIll
CIll

Reputation: 35

You could try using vw for the font size?

.largest {
    font-size: 1.0vw;
    border: 1px solid red;
    border-radius: 5px;
    padding: 2px 5px;
    white-space: nowrap;
    line-height: 1.5rem;
}

Where 1.0vw is a 100% of you pages width.

Upvotes: 0

Related Questions