Css Перенос одинаковых текстовых слов при переходе с простого на жирный - PullRequest
Новая
       6

Css Перенос одинаковых текстовых слов при переходе с простого на жирный

0 голосов
/ 21 мая 2018

Я видел несколько хороших ответов, как избежать смещения правильных элементов при использовании жирного шрифта для наведения.Моя проблема в другом.У меня произвольный текст, который должен соответствовать уже установленному размеру коробки.Мы говорим об очень коротком тексте, 2-3 слова, меняющие ширину, несущественны, и это нормально.

Проблема в том, что формулировка такова, что обтекание простым текстом составляет одну строку, а жирным -в две строки.Например

Это пример текста

Это пример
text

Isесть способ применить перенос слов для жирного шрифта при написании простого текста.Таким образом, даже если текст простой, он будет обернут:

Это пример
text

... и это сделает переход более плавным.

это демонстрирует проблему: http://jsfiddle.net/bpxf4tq0/5/

<button class="launch">This is example text</button>

button.launch {
  border: none;
  width: 120px;
}

button.launch:hover {
  font-weight: bold;
}

1 Ответ

0 голосов
/ 21 мая 2018

То, что вы хотите, не может быть сделано без JavaScript, но вы можете сделать наоборот: сделать ширину кнопки по умолчанию такой же ширины, как ширина, которая будет иметься при отображении жирным шрифтом.Одна хитрость для этого заключается в том, чтобы вставить жирный текст (незаметно), чтобы кнопка имела большую ширину.

Один из способов сделать это - поместить текст в атрибут и отобразить содержимое.атрибута в псевдоэлементе :: before.

В этом примере у меня есть две кнопки, одна с обработкой (которая всегда имеет «жирный» ширину) и для сравнения, одна ведет себя нормальным образом(т.е. становится шире, когда полужирный). 

button:hover {
  font-weight: bold
}

button::after {
  content: attr(data-value);
}

button.launch::before {
  content: attr(data-value);
  visibility: hidden;
  display: block;
  height: 0;
  font-weight: bold;
}
<button class="launch" data-value="This is example text"></button>
<hr>
<button data-value="This is example text"></button>

Надеюсь, это поможет в качестве обходного пути!

...