Cần xóa giá trị href khi in trong Chrome

Question

Tôi đang cố gắng tùy chỉnh CSS in và thấy rằng nó in các liên kết với giá trị href cũng như liên kết.

Đây là trong Chrome.

Đối với HTML này:

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

It in:

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

Và tôi muốn nó in:

Google 

Answer 1

It doesn't. Ở đâu đó trong bản định kiểu in của bạn, bạn phải có phần mã này:

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

Khả năng duy nhất khác là bạn có phần mở rộng làm việc đó cho bạn.

Answer 2

Tôi đã có cùng một vấn đề, nhưng vì tôi đã sử dụng HTML5 Boilerplate và nó có quy tắc mà Eric đã đăng trong truy vấn phương tiện truyền thông style.css để in. Chỉ cần xóa nó khỏi đó.

Answer 3

Bootstrap thực hiện điều tương tự (... như câu trả lời được chọn bên dưới).

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

Chỉ cần loại bỏ nó từ đó, hoặc ghi đè lên nó trong stylesheet in của riêng bạn:

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

Answer 4

Nếu bạn sử dụng CSS sau

<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" /> 

chỉ cần thay đổi nó thành phong cách sau đây bằng thêm phương tiện = "màn hình"

<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" /> 

Tôi nghĩ nó sẽ hoạt động.

câu trả lời cựu như

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

đã không làm việc tốt trong trình duyệt chrome.

Answer 5

tôi gặp phải một vấn đề tương tự chỉ với một img lồng nhau trong neo tôi:

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

Khi tôi áp dụng

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

Tôi mất img tôi và toàn bộ chiều rộng neo đối với một số lý do, vì vậy thay vì Tôi đã sử dụng:

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

hoạt động hoàn hảo.

Mẹo thêm: inspect print preview

Answer 6

Đối với người dùng bình thường. Mở cửa sổ kiểm tra của trang hiện tại. Và nhập:

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

Sau đó, bạn sẽ không thấy liên kết url trong bản xem trước bản in.

Answer 7

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

làm việc của hoàn hảo.