HTML: мягкий гипс (& shy;) без тире?
У меня небольшая проблема с макетом: на веб-сайте клиентов мы показываем контактную информацию людей в маленькой коробке. Ширина этого поля ограничена. Как это бывает, есть люди с очень длинными именами (в конце концов, это в Германии...), и адрес электронной почты представляет собой объединение имени и фамилии. Результат: при определенных именах адрес электронной почты переполняет ограничения, указанные в поле about.
Вставка ­ перед @приводит к правильному разрыву строки, но выглядит так:
john.doe-
@example.com
Можно ли подавить эту черту? Я не хочу использовать <br />потому что для 90% имен доступной ширины более чем достаточно.
6 ответов
Хотя я не уверен, как это делает кросс-браузер (вероятно, довольно хорошо), вы всегда можете использовать символ пробела ( ) или пространство нулевой ширины ( ​ ). ++
john.doe @example.com
++ Я бы не советовал использовать пробел нулевой ширины, так как некоторые браузеры явно не отображают его правильно ( источник).
Используйте пробел нулевой ширины: ​
john.doe​@example.com
В действии здесь: http://jsfiddle.net/uTXwx/1/
Вы можете подавить дефисы, установив hyphenate-character в пустую строку:
{
hyphenate-character: "";
}
не печатает тире, копирует/вставляет без нежелательных символов
Если вы хотите отказаться от поддержки Internet Explorer 11, вы можете использовать <wbr>элемент. Это, вероятно, лучше, чем использование пространства нулевой ширины, потому что оно не будет скопировано в буфер обмена.
Вы можете посмотреть на CSS собственности word-wrap,
И эта страница, кажется, делает то, что вы хотите.
Я предпочитаю использовать предполагаемый HTML-элемент возможности разрыва строки. По сути, это пространство нулевой ширины U+200B, и оно ведет себя так, как должно, поэтому без дефиса.
Я считаю, что яснее видеть, что
<wbr>делает в исходном коде, чем использование
​.
john.doe<wbr>@example.com
john.doe​example.com
Оба ломаются без хайпа.
john.doe
@example.com