css排版定位问题

Question

请问下下图中，这个手机的wap页面，这个日期被文字挡住要怎么处理的呢。手机设备宽度不定，文字的个数不定。怎么才能在，文字的最后一行，如果日期放不下了，就换行？

Answer 1

<style type="text/css">
    div{
        position:relative;
    }
    span{
        position: absolute;
        right: 0;
        bottom: 0;
    }
    label{
        display: inline-block;
        width: 40px;
    }
</style>
<div>
    <p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字文字我<label>&nbsp;</label></p>
    <span>09-28</span>
</div>

设置时间bottom:0，在文字后加一个与时间等宽的空格占位符。

Answer 2

用flex布局或使用calc计算宽度

Answer 3

想想浮动是干嘛的，span设个右浮动不就完了么~
大概这种感觉
https://jsfiddle.net/0w8zucf0/

Answer 4

用flex布局或使用calc计算宽度加粗文字