Позиция текста внутри элемента блока

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> к Flexbox т.е. от display: block к 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

Вы можете установить display: flex на a и что должно решить проблему.

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