需要帮助print CSS [英] Need help with print CSS

查看：83 发布时间：2019/6/5 0:35:18 html-css

本文介绍了需要帮助print CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我第一次涉及打印CSS，我需要一些指导。

我网站上的网页看起来很好 - 对于我未经训练的眼睛 - 当显示在

任何标准浏览器中的监视器。但是，我是新来的打印CSS

并且无法正确打印我的打印页面上的文字

。

我知道我需要一个单独的CSS用于打印，而不是我用于显示在显示器上的
的CSS;我知道这是通过为我的HTML页面中的每个CSS设置一个单独的

链接来完成的，例如：

< link rel =" stylesheet" HREF =" screen.css" media =" screen"

< link rel =" stylesheet" HREF =" print.css" media =" print">

我在打印CSS中设置了@page规则，如下所示：

@页面{size：auto;保证金：5％}

当我在浏览器中查看页面并单击打印图标时，打印的

页面存在重叠和截断的主要问题。我的页面包含一个

嵌入式菜单，< h2>包含< img>，例如< h2>< img ...

align =" right"> My Title< / h2> ;,以及两段应该在

内流动图片左侧的空格。

我看到的错误包括：

- 嵌入式菜单中最左边的字符被截断

- 菜单和页面其余部分之间的空间几乎不存在
，尽管在屏幕上呈现

时空间相当合理

- < h2>标题最右边的字符被图像覆盖

- 第一段流到图像的左边，因为它应该是

但是有些单词丢失（可能是图像覆盖的??）和其他单词，

太长而无法包装在可用空间中，被截断（或被

图像）

- 从图像下方开始的第二段，在大多数印刷线的右侧都有缺少的字。
;我曾经期望将这些单词

包装到下一行

我以为我可以通过
来减少字母和单词的截断
隐藏嵌入式菜单并发现'dispay：none''会这样做，所以

我将这行添加到我的CSS中以隐藏菜单：

div＃menu {display：none}

这样可以防止打印菜单但是没有修复

我的任何问题。我原本希望禁用打印菜单

会让页面上的其他内容有更多的工作空间，但

其余内容仍在使用中相同的空间，好像菜单已打印了

。

那么，我该如何解决这些问题呢？另外，有没有什么办法可以通过''display：none'来获取未被禁用的页面部分

来使用这些组件可能具有的空间

如果它们被打印就用了？

-

犀牛

I am dabbling with print CSS for the first time and I need some guidance.

The web pages on my site look fine - to my untrained eye - when displayed on
the monitor in any of the standard browsers. However, I am new to print CSS
and am having trouble getting the text on my printed pages to flow
correctly.

I know that I need a separate CSS for printing than the one I use for
displaying on the monitor; I know that is accomplished by having a separate
link for each CSS in my HTML pages, like so:

<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

I''ve set up an @page rule in the print CSS as follows:

@page {size: auto; margin: 5%}

When I view the page in my browser and click on the Print icon, the printed
page has major problems with overlapping and truncation. My page contains an
embedded menu, an <h2> containing an <img>, e.g. <h2><img ...
align="right">My Title</h2>, and two paragraphs which should flow within the
available space to the left of the image.

The errors I see include:
- the leftmost characters of the embedded menu are truncated
- the space between the menu and the rest of the page is almost
non-existent, although it is quite a reasonable amount of space when
rendered on the screen
- the <h2>title has its rightmost characters covered by the image
- the first paragraph flows to the left of the image as it is supposed to
but some words are missing (covered by the image perhaps??) and others, that
are too long to wrap in the available space, are truncated (or covered by
the image)
- the second paragraph, which begins below the image, has words missing from
the right hand side of most of the printed lines; I had expected those words
to wrap to the next line

I thought I might be able to reduce the truncation of letters and words by
hiding the embedded menu and found out that ''dispay: none'' would do that, so
I added this line to my CSS to hide the menu:

div#menu {display: none}

This had the effect of preventing the printing of the menu but didn''t fix
any of my problems. I had hoped that disabling the printing of the menu
would give the rest of the content on the page more room to work with but
the remaining content is still using the exact same space as if the menu had
been printed.

So, how do I solve these problems? Also, is there any way to get the parts
of the page that are not disabled via ''display: none'' to use the space that
those components would have used if they had been printed?

--
Rhino

需要帮助print CSS [英] Need help with print CSS

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

需要帮助print CSS [英] Need help with print CSS

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭