3

你知道眼图有很多行和乱七八糟的字母，而且每行都变小了，很难阅读，那么 CSS 有可能吗？就像，我有一个 DIV，它设置为text-align: justify，但我想让每行更小。我不知道如何引用每个后续行或任何内容。有人有想法么？它必须是可能的，如果不是使用带有一些 jQuery 巫术或类似的 CSS 的话。

4

3 回答 3

3

试试这个http://jsfiddle.net/tuanderful/mQYCt/

我基本上将一堆 div 相互嵌套，使用子选择器>和行高的相对单位，em

► CSS

div > div {
  line-height: .8em;   
  font-size: .8em;    
}

► HTML

<div>
  Foo
  <div>
    Foo
    <div>
      Foo
    </div>
  </div>
</div>​

这种方法只是将一堆 div 相互嵌套；由于div > div定义，每个随后嵌套div的比例都小于其父级。

于 2012-10-05T07:40:46.530 回答
0

一些jQuery的解决方案：
1）标记

​&lt;div>
    <p>This is line one</p>
    <p>This is line two</p>
    <p>This is line three</p>
    <p>This is line four</p>
    <p>This is line five</p>
    <p>This is line six</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

2）CSS（最大线的大小）

​div > p:first-child {
    font-size:1.8em;
}​

3）JS：

var pars = $("div p");
var size;
for (var i = 0; i < pars.length - 1; i++) {
    size = parseInt($(pars[i]).css('font-size'));
    $(pars[i+1]).css('font-size', (size*0.9+"px"));
}​

如果您想更快地减小字体大小 - 将 0.9 更改为更小

ps 工作示例 - http://jsfiddle.net/BVWp4/

于 2012-10-05T07:53:29.990 回答
0

Tuanderful提供了可能是最简单和最兼容浏览器的方法，但我正在编译更多。nth-child(#)一个明显的方法是我在这里演示的一系列声明：http: //jsfiddle.net/mQYCt/2/

.parent > div:nth-child(1) {
  font-size: 30px;
}
.parent > div:nth-child(2) {
  font-size: 25px;
}
.parent > div:nth-child(3) {
  font-size: 20px;
}
...

如果更多的浏览器同时实现calc和css 变量，这可能只需要一个声明就可以完成，但这还有点距离。

我也试过（只是出于好奇）使用 acounter-increment来做到这一点：

.parent {counter-reset: num;}
.parent div {
    counter-increment: num;
    font-size: -moz-calc( num * 10px);
    font-size: calc( num * 10px);
}

毫不奇怪，这在任何浏览器中都不起作用，但这是一个有趣的想法。

于 2012-10-06T02:05:25.427 回答