块元素中文本的位置

Question

我需要确保如果文本行太长，它不会超出价格，但是一旦它接近带有价格的块，就会进入第二行。我希望这是有道理的。请参阅'带一小片柠檬的绿茶'一行。 '''这个词不应该超出界限，它应该已经移到第二行。

任何想法如何解决这个问题？

.lst { 
 
    font-family: montserrat; 
 
    width: 300px; 
 
    list-style-type: none; 
 
    position: relative; 
 
} 
 

 
ul.lst li { 
 
    position: relative; 
 
} 
 

 
ul.lst li a { 
 
    text-decoration: none; 
 
    color: #252525; 
 
    display: block; 
 
    padding: 5px; 
 
    position: relative; 
 
    border-bottom: 2px solid #f3f2e8; 
 
    z-index: 2; 
 
} 
 

 
ul.lst li em { 
 
    font-style: normal; 
 
    float: right; 
 
    width: 25%; 
 
    color: orange; 
 
} 
 

 
ul.lst li span { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: block; 
 
    height: 100%; 
 
    text-indent: -9999px; 
 
    background: #BFD3EE; 
 
    opacity: 0.5; 
 
} 
 

 
ul.lst li:hover span { 
 
    background: #658BBB; 
 
} 
 

 
ul.lst li:hover a{ 
 
    color: #61304B; 
 
} 
 

 
ul.lst li:hover em{ 
 
    color: #61304B; 
 
}

<ul class="lst"> 
 
    <li><a href="#">Americano<em>$2.24</em></a><span style="width:20%">20%</span></li> 
 
    <li><a href="#">Green tea with a tiny piece of lemon<em>$22.50</em></a><span style="width: 50%">50%</span></li> 
 
    <li><a href="#">Black Tea<em>$2</em></a><span style="width: 75%">75%</span></li> 
 
    <li><a href="#">Black coffee<em>$2</em></a><span style="width: 90%">90%</span></li> 
 
    <li><a href="#">Latte<em>$2</em></a><span style="width: 50%">100%</span></li> 
 
</ul>

Answer 1

改变你的HTML的结构一点点改变你<a>从display: block Flexbox的即到display: flex。

在下面的代码片段看一看：

.lst { 
 
    font-family: montserrat; 
 
    width: 300px; 
 
    list-style-type: none; 
 
    position: relative; 
 
} 
 

 
ul.lst li { 
 
    position: relative; 
 
} 
 

 
ul.lst li a { 
 
    text-decoration: none; 
 
    color: #252525; 
 
    display: flex; 
 
    padding: 5px; 
 
    position: relative; 
 
    border-bottom: 2px solid #f3f2e8; 
 
    z-index: 2; 
 
} 
 

 
ul.lst li a .text { 
 
    flex: 1; 
 
} 
 

 
ul.lst li em { 
 
    font-style: normal; 
 
    float: right; 
 
    width: 25%; 
 
    color: orange; 
 
} 
 

 
ul.lst li span { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: block; 
 
    height: 100%; 
 
    text-indent: -9999px; 
 
    background: #BFD3EE; 
 
    opacity: 0.5; 
 
} 
 

 
ul.lst li:hover span { 
 
    background: #658BBB; 
 
} 
 

 
ul.lst li:hover a{ 
 
    color: #61304B; 
 
} 
 

 
ul.lst li:hover em{ 
 
    color: #61304B; 
 
}

<ul class="lst"> 
 
    <li> 
 
    <a href="#"> 
 
     <div class="text">Americano</div> 
 
     <em>$2.24</em> 
 
    </a> 
 
    <span style="width:20%">20%</span> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <div class="text">Green tea with a tiny piece of lemon</div> 
 
     <em>$22.50</em> 
 
    </a> 
 
    <span style="width: 50%">50%</span></li> 
 
    <li> 
 
    <a href="#"> 
 
     <div class="text">Black Tea</div> 
 
     <em>$2</em> 
 
    </a> 
 
    <span style="width: 75%">75%</span> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <div class="text">Black coffee</div> 
 
     <em>$2</em> 
 
    </a> 
 
    <span style="width: 90%">90%</span> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <div class="text">Latte</div> 
 
     <em>$2</em> 
 
    </a> 
 
    <span style="width: 50%">100%</span> 
 
    </li> 
 
</ul>

希望这有助于！

Answer 2

您可以设置adisplay: flex和应该解决这个问题。

.lst { 
 
    font-family: montserrat; 
 
    width: 300px; 
 
    list-style-type: none; 
 
    position: relative; 
 
} 
 
ul.lst li { 
 
    position: relative; 
 
} 
 
ul.lst li a { 
 
    text-decoration: none; 
 
    color: #252525; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 5px; 
 
    position: relative; 
 
    border-bottom: 2px solid #f3f2e8; 
 
    z-index: 2; 
 
} 
 
ul.lst li em { 
 
    font-style: normal; 
 
    margin-left: auto; 
 
    width: 25%; 
 
    color: orange; 
 
} 
 
ul.lst li span { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: block; 
 
    height: 100%; 
 
    text-indent: -9999px; 
 
    background: #BFD3EE; 
 
    opacity: 0.5; 
 
} 
 
ul.lst li:hover span { 
 
    background: #658BBB; 
 
} 
 
ul.lst li:hover a { 
 
    color: #61304B; 
 
} 
 
ul.lst li:hover em { 
 
    color: #61304B; 
 
}

<ul class="lst"> 
 
    <li><a href="#">Americano<em>$2.24</em></a><span style="width:20%">20%</span></li> 
 
    <li><a href="#">Green tea with a tiny piece of lemon<em>$22.50</em></a><span style="width: 50%">50%</span></li> 
 
    <li><a href="#">Black Tea<em>$2</em></a><span style="width: 75%">75%</span></li> 
 
    <li><a href="#">Black coffee<em>$2</em></a><span style="width: 90%">90%</span></li> 
 
    <li><a href="#">Latte<em>$2</em></a><span style="width: 50%">100%</span></li> 
 
</ul>

Answer 3

如何与绝对位置和一些填充的链接文本，以便它不走在价格上的价格是多少？是这样的：

ul.lst li a { 
    text-decoration: none; 
    color: #252525; 
    display: block; 
    padding: 5px; 
    position: relative; 
    border-bottom: 2px solid #f3f2e8; 
    z-index: 2; 
    padding-right: 60px; 
} 

ul.lst li em { 
    font-style: normal; 
    float: right; 
    color: orange; 
    position: absolute; 
    right: 0; 
    width: auto; 
}