首页 > 解决方案 > 在 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:”之后

我努力了

一切都没有成功,感谢您的帮助。相关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; }

标签: htmlcssnewline

解决方案


推荐阅读