CSS: предотвращение переноса между промежутками - PullRequest
Новая
       5

CSS: предотвращение переноса между промежутками

0 голосов
/ 30 августа 2018

У меня есть следующий html-код: 

<span class="product">
    My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>

Моя проблема в том, что иногда текст переносится до €, поэтому я получаю: 

My really super product 19,99
€

Я бы предпочел: 

My really super product 
19,99 €

Проблема в том, что я могу добавить только дополнительный тег вокруг этого кода, но не могу изменить сам код (потому что он генерируется сторонним инструментом). Ладно, можно было бы как-то заменить вывод, но реальный код сложнее, чем в этом примере.

Так можно ли предотвратить переход между ценой и валютой только с помощью CSS?

Добавлено: Извините, я забыл упомянуть. Должно быть возможно получить 

My really super product 19,99 €

в одну строку, если места достаточно для ширины.

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Может быть, что-то подобное подойдет

Вариант 1 

.wrapper {
  position: relative;
}

.wrapper .price {
  padding-right: 20px;
}

.wrapper .currency {
  position: absolute;
  margin-left: -15px;
}
<div class="wrapper">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div class="wrapper" style="width: 200px; background-color: yellow;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div class="wrapper" style="width: 155px; background-color: #0f0;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div class="wrapper" style="width: 140px; background-color: #99f;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

Здесь .wrapper не является действительно необходимым. В большинстве случаев вы можете добавить стиль только для .price и .currency. Попробуйте внедрить решение в свой макет и просмотреть.

Вариант 2 

.price {
  padding-right: 1em;
}

.currency {
  margin-left: -1em;
}
<div>
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div style="width: 200px; background-color: yellow;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div style="width: 155px; background-color: #0f0;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>

<br>

<div class="wrapper" style="width: 140px; background-color: #99f;">
    <span class="product">
        My really super product
    </span>
    <span class="price">19,99</span><span class="currency"> €</span>
</div>
0 голосов
/ 30 августа 2018

Вам нужно использовать <br/>, возможно, это поможет вам добавить такие данные 

<span=class="">
 My really super product</Span><br/>
<spa="">19,99</span><span="">$</span>
...