¿Puede decirme cómo pasar la fecha a la siguiente línea? Lo he intentado de muchas formas. Pero no hubo suerte.

Intenté esto. Pero sin efecto.

.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;
}

UI

enter image description here

0
Sampath 16 oct. 2018 a las 14:29

2 respuestas

La mejor respuesta

Casi eres bueno, simplemente aplica el truco \A al pseudo elemento 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>
1
Temani Afif 16 oct. 2018 a las 11:58

Utilice display: block; para em

.not {
    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;
}
em{
    display: block;
    font-size: 12px;
}
<p class="not">thesite.com
   <span>
 $8800
  </span>
  <em>2018-10-10</em>
</p>
0
לבני מלכה 16 oct. 2018 a las 11:36