首页 > 技术文章 > bootstarp 样式细节(tooltip布局)

feigao 2015-12-14 20:44 原文

在写bootstarp中发现的几个小样式问题,记录以后可能用的到

 

1.有时候我们想要超过td长度后自动显示省略号,我们会使用

table {
    table-layout: fixed;
}

    table td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

这样在使用tooltip时就会出现布局出差的情况。

添加

/*处理tooltip被上属性影响*/
.tooltip-inner {
    white-space: initial;
    text-align: left;
}

即可解决

 

2.有时候我们想要tooltip提示的内容里支持 html,但发现默认是不可用的。

添加

data-html='true'

属性即可支持

 

另: data-html='true'个属性加上后,上述的第一个布局问题即使不添加white-space: initial;也可以解决了~~~~surprise !

 

推荐阅读