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

Question

我想要两个固定宽度的句子:30%，但我的第一个 div“words”转到下一行。 class="left"words 显示不正确，另一个我的第二个下一个 div "words"mixed 与这个 first 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

从 .bg.left 中删除 position:absolute 并添加 display:inline-block 以重新建立允许宽度的 block 上下文在您的 span 上设置(默认情况下是内联元素，因此不遵守宽度声明)。此外，您应该在 .bg .left:before 上更改为 float:right。

Your fixed Example