在内联元素中的下一行显示文本

Question

Can you tell me how to break the date to next line? I have tried many ways. But no luck.

I tried this. But no effect.

.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

Answer 1

You are almost good, simply apply the \\A trick to the em pseudo element

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

Answer 2

Use display: block; to 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>