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

Question

我在网站上为引述创建了一个内容框，但是，在响应测试中，文本似乎在最小比例下脱离了内容框。关于动态调整文本大小的任何建议？最好使用 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;
}

Answer 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