首页 > 其他分享 >BootStrap ToolTip内容换行

BootStrap ToolTip内容换行

时间:2024-08-09 17:27:46浏览次数:5  
标签:换行 BootStrap ToolTip color template rem

1 一说是改源码

template: '<div class="tooltip" role="tooltip">' + '<div class="tooltip-arrow"></div>' + '<div class="tooltip-inner"></div>' + '</div>',

改成

template: '<div class="tooltip" role="tooltip">' + '<div class="tooltip-arrow"></div>' + '<pre class="tooltip-inner"></pre>' + '</div>',

将DIV标签换成PRE标签,就可以正常识别换行符(/n)

2 另一说改样式

.tooltip-inner {
  white-space:pre-line; //保留换行符,其他都与normal的处理规则一致 
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
}

上述两种方法亲测皆可实现换行目标,在此记录一下~

标签:换行,BootStrap,ToolTip,color,template,rem
From: https://www.cnblogs.com/artistx/p/18351109

相关文章

  • 分享一个200年日历的黄道吉日sql数据打包供下载以及推荐一个好用的基于bootstrap的颜
    一、分享一个200年日历的黄道吉日sql数据打包    自己抓取的一套200年(1900-2100)全部日期的黄道吉日数据,分享出来,也在此备份以备以后自己要用。包括每天年月日,干支年,干支月,干支日,星期,阳历,农历,阴历月份,阴历日期,星座,胎神,五行,冲,煞,生肖,吉日,值......
  • echarts自定义x轴和tooltip数据格式
    echarts自定义x轴和tooltip数据格式x轴和y轴数据格式如下x:[0,1,2,3,4,5,6,.....,23],y:[2.5,3.1,3.2,2.2,2.3,3.1,3.1,null,null,null,....,null]//接口返回0-23点的数据,每一个小时一个间隔,没有的话则为null 修改后xy轴数据格式如下//每五分钟一......
  • echarts设置tooltip遇到值为0不展示的问题(已解决)
    echarts设置tooltip遇到值为0不展示的问题(已解决)遇到值为0时tooltip:{trigger:"axis",extraCssText:"z-index:3",axisPointer:{type:"shadow",//默认为直线,可选为:'line'|'shadow'......
  • echarts设置tooltip的层级
    echarts设置tooltip的层级tooltip:{trigger:"axis",extraCssText:'z-index:3',//修改层级borderColor:"rgba(0,170,255)",},完整的option示例如下:option={tooltip:{trig......
  • flex布局之一行显示4个,如果多于4个,自动换行(只能4个 )
    <divstyle="display:flex;justify-content:space-between;flex-wrap:wrap;"><divclass="item"style="background-color:aliceblue;"></div><divclass="item"style="backgro......
  • el-table数据中特殊字符tooltip换行展示并且列表中超出显示省略号
     <el-table-column prop="baMsg" label="描述信息">             <template slot-scope="scope">                <el-tooltip class="item" effect="dark" placement="top-start">           ......
  • Tkinter ttkbootstrap 上的属性错误
    所以我使用tkinterttkbootstrap编写这个应用程序。它在主窗口上运行良好,但是当我尝试在新窗口中打印函数的结果时,它说AttributeError:'str'objecthasnotattribute'get'我对编码完全陌生,所以我将不胜感激。这是代码:fromtkinterimport*fromttkbootstrap.......
  • PYTHON 代码执行错误 - 冻结 importlib._bootstrap>(1165)_find_and_load()?
    在MACOS10.15(CATALINA)上执行此PYTHON代码时出现以下错误。我正在使用IDLEShell编写PYTHON3.11。Python3.11.4(v3.11.4:d2340ef257,Jun 62023,19:15:51)[Clang13.0.0(clang-1300.0.29.30)]ondarwinType"help","copyright","credits"o......
  • c 语言 换行
      在C语言程序编写中,我们有时会遇到一行代码太长而影响阅读或者出现与部分公司或组织要求的编码规范不符的情况,此时我们需要将这行代码分成多行来写。一、针对一般语句换行使用\结尾作为换行标记在编译时,\后面的换行符将被忽略,当做一行处理。比如宏定义时使用#definemy_puts......
  • 如何在 python 日志记录中插入换行符?
    importlogginglogging.basicConfig(level=logging.DEBUG,format='%(asctime)s%(levelname)s%(message)s',datefmt='%H:%M:%S')logging.info('hello')logging.warning('\nnewhello')11:15:01INFOhello11:16......