html - 在内联元素的下一行显示文本
问题描述
你能告诉我如何将日期打破到下一行吗?我尝试了很多方法。但没有运气。
我试过这个。但是没有效果。
.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>
推荐阅读
- java - 我关于通过 css 选择器查找元素的 Selenium 的问题
- arrays - Creating an Dynamic Tables in MS-SQL (feasibility)
- windows - Record region of screen using FFMPEG?
- ember.js - How to use route's params in adapter in Ember.js?
- php - Symfony : make:crud 与 ManyToOne 关系
- angular - 如何将界面模态转换为 Observable {}
- c# - 如何在 C# 中获取方法的参数?
- c++ - 返回一个只移动的右值引用
- react-native - 使用 ReactNative + Redux-persist V 5.10 时出错
- python - 使用 range() 修改 x & y 以使用 Python turtle 创建网格