html - 两个句子之间的虚线，但句子的宽度是固定的

Question

我想要两个固定宽度的句子：30% 但我的第一个 div “单词”转到下一行。class="left" words没有正确显示，另一个我的第二个下一个 div " words "与第一个 div混合

HTML

<div class="bg">
    <span class="left">Hello Hello Hello Hello my text is missing plz show</span>
    <span class="right">My friend.</span>
</div>
  <div class="clear"></div>
<div class="bg">
    <span class="left">sohan sohan sohan sohan sohan sohan sohan</span>
    <span class="right">My friend.</span>
</div>

CSS

.bg{width:90%; margin:0 auto; position:relative;}
.bg .left{width:auto; max-width:30%; min-width:10%; position:absolute; text-align:justify; background-color:white;}
.bg .right{width:auto; max-width:30%; min-width:10%; float:right; overflow-x:hidden; overflow-y:hidden; text-align:justify; background-color:white;}
.bg .left:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . ."}
.clear{clear:both;}

结果

Hello Hello Hello Hello.................................... My friend.
sohan sohan sohan ......................................... My Friend.
sohan sohan sohan sohan

Answer 1

删除position:absolute并.bg .left添加display:inline-block以重新建立允许在您span的 s 上设置宽度的块上下文（默认情况下是内联元素，因此不尊重宽度声明）。你也应该改变float:right你的.bg .left:before.

您的固定示例