文本两端对齐及将表单打印在A4上

最新推荐文章于 2024-03-07 16:59:59 发布

小皮皮不皮

最新推荐文章于 2024-03-07 16:59:59 发布

阅读量333

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/81017469

css 专栏收录该内容

29 篇文章

订阅专栏

本文探讨了在前端设计中如何解决A4纸打印布局的问题，包括使用特殊字体、实现内容自适应A4纸大小及多页打印时保持格式一致性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**工作中遇到一个问题就是单位看到一些有关公司得相关得事项，想要讲内容打印出来，所以前端设计了一个样式，

但是还是有很多不足的地方，暂时没有想到更好的方法，如：

一些字体要求是特殊字体，没有办法为了几个字而去安装实现，所以全部采用了图片;

由于前端没法计算A4纸的大小，所以一点一点摸索通过屏幕px实现了当内容不多，还是打印一张完整A4上,这也导致了当内容使其超过A4纸到了第二张纸上使无法头部加上边框线;

*****想要看一下在A4纸上得效果，可以再控制台输入window.print() 查看效果*******

如果有大神看到有更好的方法，可以告知，谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding: 0;margin: 0;}
        table{width: 100%;height: 100%;text-align: center; border: 1px solid black;}
        tr{width: 100%;height: 30px;}
        td{
            width: 25%;
            padding: 10px;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            text-align: justify;  /**文本两端对齐*/
        }
        span{   /*要使文本两端对齐生效，必须添加这个**/
            display: inline-block;
            width: 100%;
        }
        .center{
            text-align: center;
        }
        .borderNone{
            border-right: none;
        }
        .borderBottom{
            border-bottom: none;
        }
        tr td.widt{
            width: 25%;
        }
    </style>
</head>
<body>
<p style="width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 18px;">会议记录</p>
<table cellpadding="0" cellspacing="0">
    <tr>
        <!--注：内容里面不能出现空字符，不然也会算在内-->
        <td>应到人数<span></span></td>
        <td class="center">152人 内容里面不能出现空字符，不然也会算在内内容里面不能出现空字符，不然也会算在内内容里面不能出现空字符，不然也会算在内内容里面不能出现空字符，不然也会算在内内容里面不能出现空字符，不然也会算在内</td>
        <td>实到人数<span></span></td>
        <td class="center borderNone">120人</td>
    </tr>
    <tr>
        <td>主持人<span></span></td>
        <td class="center"> </td>
        <td>记录人<span></span></td>
        <td class="center borderNone"> </td>
    </tr>
    <tr>
        <td colspan="10" class="center borderNone">主   要   内   容</td>
    </tr>
    <tr>
        <td colspan="10" style="height: 1000px;position: relative" class="center borderNone">
            <div style="width:98%;position: absolute;top: 20px;left: 10px">
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
                在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。

            </div>

        </td>
    </tr>
    <tr>
        <td colspan="1">参加党员列表<span></span></td>
        <td colspan="9"  class="center borderNone"> </td>
    </tr>
    <tr>
        <td colspan="1" class="borderBottom">缺席党员列表<span></span></td>
        <td  colspan="9" class="center borderNone borderBottom"> </td>
    </tr>
</table>
</body>
</html>