动态缩放Bootstrap3内容(主要是文本)以显示宽度? Aka响应文本大小

时间:2014-11-13 05:54:24

标签: twitter-bootstrap text twitter-bootstrap-3 responsive-design font-size

Bootstrap3的列显然根据显示尺寸进行缩放,但是也可以以相同的方式缩放文本片段吗?

似乎我只能设置字体大小,但是字符或句子是否适合屏幕也取决于内容(字符数)。

是否可以动态缩放一段文本,以便它适合屏幕或Bootstrap3网格?

1 个答案:

答案 0 :(得分:0)

使用文本溢出属性:

#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: clip; 
    border: 1px solid #000000;
}

#div2 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "text-overflow:ellipsis":</p>
<div id="div2">This is some long text that will not fit in the box</div>