html - 在 span 数据内容属性中插入换行符
问题描述
我将以下 html 代码作为我正在创建的新网站的一部分...
<div class="page" id="page-makalu">
<header class="bp-header cf">
<h1 class="bp-header__title">Makalu</h1>
<span class="bp-tooltip bp-icon bp-icon--about" data-content="How to get there from Londynske Namesti: Do this and then do that and then do this again"></span>
</header>
</div>
我想在跨度的“数据内容”属性中插入一个换行符。在“Namesti:”之后
我努力了
data-html="true"
用作属性并插入到数据<br/>
内容中。data-html="true"
用作属性并插入到数据\A
内容中。- 实际上在我的 IDE 中将文本拆分为换行符
- 谷歌搜索我能想到的“span / data-content / new-line”的每一个组合
一切都没有成功,感谢您的帮助。相关CSS:
.bp-tooltip:after {
font-size: 50%;
font-size: 75%;
position: relative;
top: -8px;
left: -12px;
width: 30px;
height: 30px;
}
.bp-tooltip:hover:before {
content: attr(data-content);
font-size: 110%;
font-weight: 700;
line-height: 1.2;
position: absolute;
left: auto;
margin-left: 4px;
padding: 0.8em 1em;
text-align: left;
text-indent: 0;
letter-spacing: 0;
text-transform: none;
color: #fff;
background: #5c5edc;
}
.bp-header { padding: 6em 10vw 2em; }
.bp-header__title { font-size: 2.125em; font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
解决方案
推荐阅读
- python - 在 Django 中获取本地日期时间和时间
- ios - WKWebView 决定策略在页面加载后被调用
- java - 在 Node-RED/Watson IoT 中,我的 Java 设备客户端不断在连接和断开之间切换
- python - Python烧瓶请求
- javascript - 反应,正确更新复选框
- sql - 使用like运算符进行sql连接
- node.js - 如何替换文件(或多个文件)中的多行?
- javascript - PHP没有从XMLHttpRequest接收任何数据
- emulation - 如何使用 pubsub 模拟器 http API 创建订阅?
- javascript - JS - 将表单值插入 URL