Question

我需要在html页面的某些段落的末尾添加破折号，这些段落也将被打印。我发现了一些几乎可以做到这一点的CSS，但它在打印时不起作用。

<html>
    <style media="screen" type="text/css">
    @media print{
        ul.leaders {
            max-width: 40em;
            padding: 0;
            overflow-x: hidden;
            list-style: none
        }
        ul.leaders li:after {
            float: left;
            width: 0;
            white-space: nowrap;
            content:
             "--------------------"
             "--------------------"
             "--------------------"
             "--------------------"
        }
        ul.leaders span:first-child {
            padding-right: 0.33em;
            background: white
        }
        ul.leaders span + span {
            float: right;
            padding-left: 0.33em;
            background: white;
            position: relative;
            z-index: 1
        }
    }
    </style>    
    <body>
        <ul class=leaders>
            <li><span>Almond Prawn Cocktail, with orange and potato salad, spring carrots, blue cheese, tuna, oh yes, and prawns</span></li>
        </ul>
    </body>
</html>

进行建议的更改并使用＆lt; p>元素。谢谢你的帮助。

<html>
    <style type="text/css">
    @media all{
        p.puntitos:after{
            float: left;
            width: 0;
            white-space: nowrap;
            content:
             "----------------------------------------------------------------------"
        } 
        p.puntitos span:first-child{
            padding-right: 0.33em;
            background: white
        } 
    }
    </style>    
    <body>
        <p class="puntitos">
            <span>Lorem ipsum dolor sit amet</span>
        </p>

        <p class="puntitos">
            <span>Eros massa sociis, porttitor morbi neque eget.</span>
        </p>
    </body>
</html>

Answer 1

content中不能有多行，除了第一个和最后一个之外的所有额外括号都会被忽略。所以你不妨把它们拿出来

content: "--------------------------------------------------------------------------------";

Demo（使用@media all代替@media print来演示）

正如Careless所述，您还必须删除media="screen"标记上的<style>，因为它与印刷品冲突

CSS在段落结束后打印短划线“ - ”

1 个答案: