Необходимо удалить значения href при печати в Chrome

290

Я пытаюсь настроить CSS для печати и обнаружил, что он печатает ссылки со hrefзначением, а также со ссылкой.

Это в Хроме.

Для этого HTML:

<a href="http://www.google.com">Google</a>

Это печатает:

Google (http://www.google.com)

И я хочу это напечатать:

Google

— Крис Гратиньи
источник

1

Имейте в виду, ПОЧЕМУ каждая основная платформа CSS делает это - вы не можете нажать на бумагу! Поэтому, если вы собираетесь деактивировать его, вы должны добавить внизу список ссылок, например, такой: alistapart.com/article/improvingprint

— Julix,

1

Это правда, но я думаю, что лучше контролировать, когда и где появляется ссылка. Например, в моих ссылках я хочу, чтобы они появлялись в следующей строке после текста, без скобок. Так что я просто показываю URL в тексте.

— user4052054

602

Bootstrap делает то же самое (... как выбранный ответ ниже).

@media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

Просто удалите его оттуда или переопределите в собственной таблице стилей печати:

@media print {
  a[href]:after {
    content: none !important;
  }
}

— Алекс Гикулеску
источник

17

<style>@media print{a[href]:after{content:none}}</style>В основном для себя, когда я снова и снова возвращаюсь на эту страницу, спасибо

— Уильям Энтрикен,

1

Очевидно, Фонд тоже делает то же самое.

— spasticninja

Похоже, HTML5 Boilerplate также делает это! Так что я думаю, что мне нужно переопределить это с помощью изменения кода на моем собственном веб-сайте и с помощью инспектора на других веб-сайтах ...

— ADTC

Предупреждение: у нас были проблемы, когда таблица иногда теряла последние несколько строк при печати. Оказалось, что это правило было виновником, или, по крайней мере, удаление его решило проблему. Не знаю, почему это так.

— Хенрик Н

1

@HenrikN - я думаю, что это связано с плавающими колонками начальной загрузки. использование float:noneтам, где это необходимо, исправило аналогичную проблему несколько недель назад; может помочь вам, но это другая проблема

— Эндрю

40

Это не так . Где-то в вашей таблице стилей печати вы должны иметь этот раздел кода:

a[href]::after {
    content: " (" attr(href) ")"
}

Единственная другая возможность - у вас есть расширение, делающее это за вас.

— Эрик
источник

1

Я получил это в curb Foundation css.

— forX

26

@media print {
   a[href]:after {
      display: none;
      visibility: hidden;
   }
}

Развернуть фрагмент

Работа идеальна.

— JELEWA.de
источник

10

Если вы используете следующий CSS

<link href="~/Content/common/bootstrap.css" rel="stylesheet" type="text/css"    />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" type="text/css" />

просто измените его на следующий стиль, добавив media = "screen"

<link href="~/Content/common/bootstrap.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" **media="screen"** type="text/css" />

Я думаю, что это будет работать.

прежние ответы как

    @media print {
  a[href]:after {
    content: none !important;
  }
}

были не очень хорошо работают в браузере Chrome.

— Ван Цзицзюнь
источник

4

Я столкнулся с подобной проблемой только с вложенным img в моем якоре:

<a href="some/link">
   <img src="some/src">
</a>

Когда я подал заявку

@media print {
   a[href]:after {
      content: none !important;
   }
}

По какой-то причине я потерял img и всю ширину якоря, поэтому вместо этого я использовал:

@media print {
   a[href]:after {
      visibility: hidden;
   }
}

который работал отлично.

Бонусный совет : просмотр предварительного просмотра

— TrampGuy
источник

1

Чтобы скрыть URL страницы.

media="print"Пример использования в стиле tage:

<style type="text/css" media="print">
            @page {
                size: auto;   /* auto is the initial value */
                margin: 0;  /* this affects the margin in the printer settings */
            }
            @page { size: portrait; }
</style>

Если вы хотите удалить ссылки:

@media print {
   a[href]:after {
      visibility: hidden !important;
   }
}

— Абд Абугхазалех
источник

-2

Для обычных пользователей. Откройте окно проверки текущей страницы. И введите:

l = document.getElementsByTagName("a");
for (var i =0; i<l.length; i++) {
    l[i].href = "";
}

Тогда вы не увидите ссылки в предварительном просмотре.

— Вен Синь
источник

Это хорошее решение, если у вас нет контроля над исходным кодом страницы, которую вы пытаетесь распечатать.

— Paddymac