bootstarp 样式细节(tooltip布局)
在写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 !
bootstarp 样式细节(tooltip布局)的更多相关文章
- .Net数据集导出到Excel样式细节---------------摘自别人的
.Net数据集导出到Excel样式细节 本文的目的是总结一些在做Excel导出功能时需要注意的样式细节.使用环境是Asp.Net,数据集的形式是Html Table,Excel还是识别一些CSS代码的 ...
- HTML_css样式表 样式属性 格式布局
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- (day44)css样式、css布局
目录 一.css样式 (一)文字样式 (1)文字字体font-family (2)字体大小font-size (3)字体粗细font-weight (4)字体颜色color (二)文本样式 (1)文字 ...
- 移动端和pc端公用样式及rem布局
一:移动端准备工作<meta name="viewport" content="width=device-width, initial-scale=1.0, max ...
- 浅谈Android样式开发之布局优化
引言 今天我们来谈一下Android中布局优化常用的一些手段.官方给出了3种优化方案,分别是</include>.</viewstub>.</merge>标签,下面 ...
- 用div和css样式控制页面布局
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化
艾尼路 出的效果图 本人嵌套 WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化) 源代码
- JS for循环有关变量类型的问题/魔兽世界样式的tooltip
<script> var num = 100; for (var i=num-5;i<num+5;i++){ // console.log(typeof(i)); console.l ...
- 第10章 布局样式相关-伸缩布局(Flexible Box)
伸缩布局(一) CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或 ...
随机推荐
- 组合数问题hdu5894
http://acm.hdu.edu.cn/showproblem.php?pid=5894 题意如上
- LoadRunner常见函数分析
LoadRunner常见函数分析 ?%Ze\N%?~"_J}.t051Testing软件测试网;FQ X%L|GO+R Web用户Action51Testing软件测试网b,Q8iO w1j ...
- Sigar介绍与使用
Sigar是Hyperic-hq产品的基础包,是Hyperic HQ主要的数据收集组件.它用来从许多平台收集系统和处理信息. 这些平台包括:Linux, Windows, Solaris, AIX, ...
- css 让内容满屏居中不变形
.selector { position: fixed; width: 100%; height: 100%; background-image: url(path); background-repe ...
- 《DSP using MATLAB》示例Example4.14
代码: b = [1]; a = [1, -1.5, 0.5]; % [R, p, C] = residuez(b,a) Mp = (abs(p))' Ap = (angle(p))'/pi % ch ...
- 基于netty的微服务架构
基于netty的微服务架构 微服务一篇好文章 http://san-yun.iteye.com/blog/1693759 教程 http://udn.yyuap.com/doc/essential-n ...
- spring mvc 返回json
服务器端返回的是文本,客户端得到文本后将文本转换成json就可以了,服务器端将对象转换成json 的文本形式,并且需要设定文本的类型为text/plain,charset=UTF-8 所以在 appl ...
- mark元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java unicode转中文
public static String unicodeToString(String str) { Pattern pattern = Pattern.compile("(\\\\u(\\ ...
- [转载]DW数据仓库建模与ETL的实践技巧
一.Data仓库的架构 Data仓库(Data Warehouse DW)是为了便于多维分析和多角度展现而将Data按特定的模式进行存储所建立起来的关系型Datcbase,它的Data基于OLTP源S ...