动态调整内容框中的文本大小

时间:2014-03-04 10:17:01

标签: css3

我在网站上为引文创建了一个内容框,但是,在响应性测试中,文本似乎在最小的范围内开箱即用。有关动态调整文本大小的建议吗?最好使用CSS ......

.applebox {
    width: auto;
    height: 85px;
    box-sizing: border-box;
    background: #f5f5f5;
    padding: 20px 20px 10px;
    margin: 10px 0 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-box-shadow: 10px 10px 5px #888888;
    -moz-box-shadow: 10px 10px 5px #888888;
    box-shadow: 10px 10px 5px #888888;
}

.applebox .col {
    width: 140px; 
    float: left;
    margin: 0 0 0 30px;
}

1 个答案:

答案 0 :(得分:1)

不确定您是否正在寻找能够改变font-size属性的解决方案,这应该可以通过CSS3 Media-Selectors实现。有些选择器允许规则仅适用于某些屏幕尺寸。请在此处阅读:http://www.w3.org/TR/css3-mediaqueries/

如果您对自动换行没问题,请尝试word-wrap属性:http://www.w3schools.com/cssref/css3_pr_word-wrap.asp