文本nowrap和最大宽度100%

Question

有可能将两者结合起来吗？

我有一个标签云，文本的大小随着视图的增加而增加，标签被查看得越多，文本大小就增加得越多。

为了便于阅读，每个标签都有一个边框和nowrap文本。

不幸的是，有时标记文本可能很长，并且可以被多次查看，因此它变得很大，比div或viewport大。

有没有办法通过css说：好的，nowrap，但如果太长，请减小文本的大小，使其最大值为div的100%大？

<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/

Answer 1

我们可以使用CSS属性white-space和word-wrap使其工作。

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>

这是jsFiddle

希望有帮助：(

Answer 2

您可以尝试使用vw来调整字体大小吗？

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

其中1.0vw是页面宽度的100%。

Answer 3

除非使用CSS Variables，否则无法在CSS中执行条件语句(if/else(，但并非所有浏览器都广泛支持这些语句，因此存在风险。

使用带有字体计算的Fluid Typography来相应地调整字体大小是可行的，但您需要知道容器的最小和最大宽度(我认为它在white-space: nowrap;中不太适用(：https://css-tricks.com/snippets/css/fluid-typography

看看你的代码，我认为你将不得不使用JavaScript，因为你还不能用CSS实现这一点。也许试试这个插件，我听说了一些好消息：http://fittextjs.com