Ссылка с Icon :: before, должна разрываться при многострочном

Question

Я объявил все свои текстовые ссылки со значком прямо перед ним. Работает как положено. На всякий случай текст ссылки очень длинный и разбит на вторую строку, выглядит не очень хорошо.

Текущая ситуация (при взломе):

> This linktext 
is very long
and breaks awful

Я хотел бы, чтобы это могло быть

> This linktext 
  is very long
  but breaks nicely

Как этого достичь?

.container { 
  width: 100px; 
  border: solid 1px #ddd; 
}

a::before { 
  content: ">";
  margin-right: 5px;
}

<div class="container">

  <a href="#">This textlink is very long and should break nicely</a>
  
</div>

html css

0

JonSnow 25 Окт 2019 в 10:47

Answer 1

Один из простых способов сделать это - добавить немного отступа для ссылки, немного переместить весь ее контент, а затем переместить значок назад влево с использованием отрицательного поля.

(Здесь я также добавил явную ширину к значку, затем он работает немного лучше. В противном случае вам нужно будет определить очень конкретное значение пикселя, которое работает, иначе первая строка текста может быть смещена немного иначе, чем остальные из них.)

.container {
  width: 100px;
  border: solid 1px #ddd;
}

a {
  display: inline-block;
  padding-left: 15px;
}

a::before {
  content: ">";
  display: inline-block;
  width: 15px;
  margin-left: -15px;
}

<div class="container">

  <a href="#">This textlink is very long and should break nicely</a>

</div>

Существует множество других способов, которыми это может быть достигнуто. Значок может быть абсолютно позиционирован вместо перемещения отрицательным полем, или вся ссылка может быть превращена в элемент flexbox ... но метод, показанный здесь, довольно прост и не сложен, поэтому я все еще часто использую его в подобных случаях.

1

04FS 25 Окт 2019 в 08:24

Answer 2

Это должно быть то, что вы хотите

a {
  display: block;
  padding-left: 15px;
  position: relative;
  width: 100px;
}

a::before {
  position: absolute;
  content: ">";
  margin-right: 5px;
  left: 0;
}

1

Tmba 25 Окт 2019 в 08:17

Ссылка с Icon :: before, должна разрываться при многострочном

2 ответа

Похожие вопросы

Новые вопросы

html