本站消息
在内联元素的下一行显示文本
发布于2024-11-25 17:41 阅读(1065) 评论(0) 点赞(12) 收藏(5)
你能告诉我如何将日期拆分到下一行吗？我试过很多方法。但都没有成功。
我试过了。但没有效果。
.not:after {
content: '\A';
white-space: pre;
}
.html
<p class="not">{{item.domain}}
<em>{{item.date | date:'yyyy-MM-dd'}}</em>
<span>
${{item.price}}
</span>
</p>
.scss
.not {
line-height: 48px;
padding: 5px 10px 5px 15px;
height: 55px;
background: white;
border-radius: 5px;
border-bottom: 1px solid #56cde0;
font-weight: bold;
width: 90%;
}
.not span {
float: right;
color: #9bb0bf;
font-weight: normal;
font-size: 16px;
}
用户界面
解决方案
你差不多好了，只需将\A技巧应用到em伪元素上
.not em:before {
content: '\A';
white-space: pre;
}
.not {
line-height: 18px; /*Updated this*/
padding: 5px 10px 5px 15px;
height: 55px;
background: white;
border-radius: 5px;
border-bottom: 1px solid #56cde0;
font-weight: bold;
width: 90%;
}
.not span {
margin-top:-15px; /*If you want to keep the price on the top*/
float: right;
color: #9bb0bf;
font-weight: normal;
font-size: 16px;
}<p class="not">domain.com
<em>1990-10-10</em>
<span>
$8000
</span>
</p>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/536854/f3e5c3c1d3e20669089f/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
12
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)