草庐IT

html - 多列 CSS 不适用于打印

coder 2023-08-09 原文

我为我发现了多列 CSS,但发现在打印时这些样式会被忽略。

这是一个已知错误吗?还是我做错了什么?

div {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    font-size: 16px;
    line-height: 1.6;
    width: 760px;
}

@media print {
    button {
        display: none;
    }
}
<button onclick="print()">Print...</button>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed vehicula quam, ut placerat ipsum. Cras suscipit dui nisl, at pretium leo mollis sed. Vestibulum iaculis ultricies nulla at mattis. Ut at augue sed nulla mollis pellentesque. Nulla vel
    sollicitudin libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fringilla ligula, sit amet pellentesque velit eleifend ut. Fusce id metus et tellus iaculis vulputate. Aliquam blandit fermentum augue. Cras accumsan fermentum
    tempor. In pulvinar magna vitae eros faucibus, vitae scelerisque lacus mollis. Aliquam tincidunt justo eu tortor tincidunt, nec bibendum ligula interdum. Duis sit amet tincidunt sapien. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut erat ipsum, elementum sit amet magna ut, rhoncus convallis nunc. Pellentesque tortor magna, posuere eu orci non, ultrices elementum nisi. Integer quis ullamcorper
    mi, id porta sapien. Nam ornare dolor quis nisl imperdiet eleifend. Praesent facilisis fermentum fermentum. Etiam porttitor semper nulla vel tincidunt. Fusce a nunc volutpat, ullamcorper erat id, varius nulla. Integer fringilla urna velit, quis varius
    velit interdum at. Maecenas at nisi nulla. Nunc laoreet, odio nec fermentum interdum, felis enim bibendum augue, id consectetur nibh nibh a eros. Quisque non ante venenatis, fringilla ipsum semper, dictum lacus. Nulla facilisi. Pellentesque condimentum
    feugiat consectetur. Nullam sollicitudin pellentesque quam sit amet auctor. Vestibulum eget lacus ipsum. Praesent tristique quam vel mi pellentesque, et condimentum justo suscipit. In viverra odio justo, et egestas nulla mattis sed. Etiam id porttitor
    orci. Vivamus at cursus quam. Maecenas placerat lacus ut pulvinar imperdiet. Aliquam varius arcu lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare suscipit posuere. Nullam vel sodales nisl,
    ac mollis quam. Nam imperdiet faucibus ipsum. Curabitur in felis in mi tempor pharetra. Mauris eu egestas diam. Pellentesque placerat lectus vitae cursus adipiscing. Proin non enim eros. Integer id semper ante. Vivamus pulvinar, libero in laoreet
    pellentesque, ipsum lectus suscipit dolor, a mollis erat turpis quis quam. Curabitur sapien orci, lobortis sit amet tincidunt eget, rhoncus id mi. Aliquam accumsan velit sit amet purus ullamcorper congue. In hac habitasse platea dictumst. Aliquam
    quis purus venenatis, sagittis augue non, fringilla enim. Nunc non semper justo, nec fermentum tortor. Donec fringilla massa at arcu dictum, at consequat dui faucibus. Cras sed eleifend ante. Etiam non nisi nisi. Nam aliquet felis non turpis pretium,
    quis scelerisque tortor auctor. Donec eu porttitor erat. Cras egestas tincidunt erat ac euismod. Ut eget dolor vitae magna commodo iaculis vitae nec purus. Sed vitae eros mi. Donec eu justo urna. Vivamus volutpat rhoncus erat, sit amet malesuada ligula
    pellentesque nec. Nullam sollicitudin diam arcu, quis tincidunt dui pretium et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius at libero et pulvinar. Fusce ut tincidunt felis. Ut vulputate cursus facilisis.
    Etiam erat nunc, feugiat a vestibulum vel, posuere in leo. Ut ac aliquet turpis, non ultricies mauris. Nam sed elit suscipit, mollis urna eu, laoreet odio. Duis porttitor vulputate magna, eu porta augue adipiscing volutpat. Vestibulum mi lectus, pulvinar
    at pharetra sit amet, rhoncus vel lorem. Pellentesque semper, quam sit amet pretium rutrum, ante massa tristique dui, ut interdum quam neque sit amet ligula. Mauris gravida leo eu mauris luctus fringilla. Sed malesuada libero leo, in egestas turpis
    laoreet eu. Aenean egestas imperdiet libero sit amet venenatis. Aliquam luctus tristique feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec hendrerit a nibh eu molestie. Nullam enim velit,
    bibendum in est et, accumsan condimentum leo. Sed aliquam tempus dolor in imperdiet. Ut sed dignissim felis. Phasellus nec sagittis tortor, eu ultricies sapien. Nulla convallis ipsum eget purus aliquet euismod. Sed vitae arcu sed eros dignissim fermentum.
    Integer egestas ultrices purus, ut pulvinar lacus pellentesque in. Vivamus neque ante, elementum nec lacus a, aliquam varius libero. Phasellus consequat, sem facilisis varius fringilla, tellus mi malesuada nulla, ac elementum enim ligula ut diam.
    Maecenas feugiat libero dui, eget blandit orci faucibus non. Cras iaculis at metus lobortis iaculis. Etiam nec lobortis metus, in hendrerit lacus. Sed tincidunt scelerisque turpis, non tempus arcu blandit ac. Pellentesque interdum velit at enim porta
    dapibus. Phasellus et accumsan nulla. Vestibulum augue erat, congue a sagittis dapibus, volutpat condimentum enim. Proin non ante eget eros scelerisque vestibulum id bibendum quam. Sed imperdiet vitae augue eget dapibus. Integer consectetur ut velit
    vel tristique. Sed scelerisque elit felis, ut suscipit elit ultrices vitae. Sed blandit commodo dolor at pulvinar. Vestibulum id consectetur libero. Ut vestibulum pretium ipsum. Suspendisse ac fringilla urna. Aliquam egestas enim nibh, id tristique
    nulla pharetra sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel neque diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut congue lacus quis accumsan accumsan. Praesent nec
    pellentesque mi. Etiam id lorem sed neque tempor imperdiet. Ut molestie velit eu pellentesque rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel lorem in nulla tristique auctor. Cras vitae
    hendrerit neque. Aliquam accumsan porttitor malesuada. Fusce malesuada urna id tortor ultrices, at lobortis mauris faucibus. Sed eget enim volutpat, tempor libero ut, hendrerit justo. Pellentesque eu aliquet urna. Morbi laoreet metus suscipit aliquam
    pellentesque. Suspendisse mattis ipsum sed mauris faucibus porttitor. Morbi posuere et nisl non euismod. Donec malesuada dapibus eros quis consequat. Duis non aliquet nisl, in pharetra nulla. Vestibulum venenatis risus ac elit scelerisque, a scelerisque
    diam rutrum. Maecenas cursus sodales tortor id luctus. Sed eleifend lectus pharetra pulvinar sagittis. Morbi risus orci, molestie sit amet orci nec, aliquet iaculis enim. Suspendisse at lorem suscipit, rutrum odio in, gravida massa. Aliquam vitae
    convallis ligula, a hendrerit nunc. Pellentesque tempor blandit ultrices. Curabitur hendrerit libero at adipiscing suscipit. Ut pretium consectetur tincidunt. Quisque facilisis quis enim id hendrerit. Cras aliquam mi orci, tristique porta arcu posuere
    lobortis. Ut at felis molestie, pharetra ligula quis, venenatis quam. Integer sit amet sapien eget quam consectetur adipiscing. Sed sit amet ligula a ligula ultrices euismod. Aliquam fermentum, lorem a vehicula tempor, est erat semper ipsum, ac mollis
    neque lacus non magna. Curabitur semper sem volutpat justo volutpat varius. Aenean placerat, justo aliquet lobortis scelerisque, libero ipsum tincidunt quam, at gravida augue lacus sit amet nunc. Sed tempor mattis aliquet. Proin vitae ante arcu. Donec
    lobortis facilisis eros, vitae condimentum odio fermentum sagittis. Nunc imperdiet erat eget vehicula volutpat. Phasellus eget nulla in nisl vulputate dignissim. Sed tincidunt lectus ac molestie vestibulum. Duis hendrerit dolor a accumsan tempus.
    Curabitur eget ante ut dolor vulputate pretium suscipit et lacus. Cras adipiscing est ultricies elementum gravida. Praesent consequat enim justo, sit amet posuere nunc sodales ut. Proin eget risus tempor velit iaculis molestie sit amet ac velit. Cras
    in est at tortor lacinia rutrum. Pellentesque lobortis et dolor eget pellentesque. Cras id varius libero. Suspendisse vitae dui ut mauris imperdiet rutrum. Aliquam quis viverra dolor. Cras lacinia massa et dignissim luctus. Pellentesque et lobortis
    metus. Etiam sed auctor felis, at cursus neque. Nam ut vehicula augue. Proin commodo aliquam dolor, molestie ullamcorper quam pretium eu. Sed semper, libero quis convallis consequat, leo est porttitor mi, quis blandit lorem lacus eu arcu. Etiam vel
    sapien vel dolor facilisis elementum eu sed dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque sapien eros. Integer hendrerit magna non fermentum euismod. Mauris feugiat nisl elit, id viverra
    nunc tempus non. Phasellus ut placerat ante. Pellentesque volutpat dolor in odio vulputate rhoncus. Maecenas suscipit placerat quam, ut aliquam velit volutpat a. Cras et turpis tellus. Sed vitae purus vitae orci condimentum suscipit eu non odio. Fusce
    non leo eleifend, sagittis augue sed, laoreet dui. Integer adipiscing sapien auctor, luctus sem id, semper enim. Vestibulum facilisis justo vitae enim gravida consequat. Maecenas tempus, mi vitae convallis feugiat, lorem orci bibendum felis, a tincidunt
    quam magna et nibh. Aenean tempus nec purus bibendum egestas. Pellentesque ut arcu et arcu aliquam bibendum sed quis est. Nunc pharetra sagittis eleifend. Quisque elementum tortor eget porta elementum. Vivamus ut eros ac nulla facilisis consequat.
    Donec venenatis orci ipsum, at ultrices turpis interdum vel. Fusce vitae orci dolor. Morbi sodales eros eros, quis tempus est imperdiet a. Aenean ultricies lorem elit, a rhoncus neque mollis at. Fusce placerat sapien ut cursus condimentum. Nulla consequat
    elementum vulputate. Pellentesque gravida volutpat tellus, ac hendrerit nulla sagittis sed. Ut nec turpis elit. Proin in pulvinar nisi. Donec ac condimentum velit. Sed et tortor non justo aliquam iaculis id eget sem. Pellentesque vulputate eu lectus
    at ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam at egestas sem, nec luctus augue. Mauris sagittis rhoncus bibendum. Morbi laoreet aliquet eros, adipiscing tempor mi vestibulum vitae. Duis massa arcu, aliquet semper
    magna id, tristique adipiscing velit. Quisque id rhoncus quam, a euismod justo. Fusce eget ipsum non justo mattis feugiat in in nisi. Donec ac est vehicula, aliquet nisl sed, sodales nunc. Donec luctus ante nunc, in suscipit orci dignissim quis. Nulla
    quis dolor rutrum, pharetra lacus a, facilisis ante. Phasellus a hendrerit tellus, eu viverra libero. Nulla luctus risus quis elementum placerat. Fusce rhoncus, purus vitae sollicitudin dapibus, massa nibh sodales nibh, a aliquet ante arcu id diam.
    Donec egestas laoreet viverra. Vestibulum at risus a tellus imperdiet tincidunt. Suspendisse suscipit, odio eget ultricies consequat, tellus erat auctor sem, quis placerat quam mauris sit amet felis. Pellentesque aliquam at justo eget blandit. Vivamus
    placerat risus et sagittis semper. Vivamus imperdiet vehicula pellentesque. In scelerisque quis mauris vel egestas. Proin eleifend lacinia sollicitudin. Pellentesque varius enim et felis pulvinar euismod. Nullam varius, lorem non commodo mollis, odio
    eros posuere sapien, sed aliquam eros enim vel justo. Mauris eleifend porta molestie. Quisque vulputate, leo id tempus facilisis, neque nunc cursus ipsum, et ultricies dui massa quis nibh. Quisque consectetur justo ac venenatis cursus. Nullam ut sapien
    ac velit lacinia fermentum vel eu sem. Quisque luctus ac eros vel sagittis. Quisque venenatis sem orci, eu dignissim nulla dignissim nec. Pellentesque eu elementum purus. Nulla placerat sodales lorem quis interdum. Vestibulum sodales ultricies dolor
    vitae auctor. Phasellus vel diam purus. Nam eget libero pellentesque, sagittis elit et, pharetra lorem. Quisque elementum nibh et augue ornare, ac rutrum odio blandit. Maecenas ac turpis rutrum, elementum arcu vitae, pulvinar ante. Donec nisi dolor,
    dictum at sagittis eget, ornare in erat. Curabitur velit leo, faucibus non turpis quis, suscipit pellentesque elit. Cras in venenatis orci. Maecenas blandit est id augue pellentesque, et faucibus sapien vulputate. Morbi sed molestie risus, sit amet
    elementum felis. In non turpis nisi. Nunc bibendum sem sed metus ornare, ut volutpat sem aliquam. Aliquam bibendum adipiscing suscipit. Donec consectetur sem at arcu viverra, a tincidunt velit ullamcorper. Phasellus at metus mi. Proin rhoncus mattis
    gravida. Suspendisse pellentesque pharetra turpis, sit amet facilisis orci adipiscing in. Fusce egestas nec nulla in scelerisque. Nulla congue pretium nibh, et scelerisque erat pretium eu. Aenean et nunc mauris. Morbi bibendum urna a aliquet suscipit.
    Nunc pretium dapibus lacinia. Fusce dapibus mollis molestie. Nam at interdum metus, eu consequat est. Nulla a metus massa. Vivamus justo eros, tristique ut orci vitae, sollicitudin volutpat felis. Integer consequat justo metus, non adipiscing arcu
    tristique in. Aliquam imperdiet ipsum id velit condimentum, sit amet aliquet neque ullamcorper. Nunc mi nibh, dignissim nec mauris sit amet, semper venenatis arcu. Phasellus a rhoncus turpis, interdum blandit metus. Cras sit amet posuere mauris. Donec
    at fermentum elit. Praesent sagittis augue ipsum, sed pellentesque arcu tincidunt non. Ut eu purus consequat, adipiscing eros eu, suscipit metus. Sed eu mauris eu lacus feugiat venenatis ac ut velit. Nunc eget aliquam tortor, ac iaculis orci. Quisque quis sodales lectus. Nunc dui felis, aliquam luctus nisi malesuada, ultrices varius risus. Phasellus malesuada eros ut dictum consectetur. In adipiscing condimentum fermentum. Nullam ultrices purus ac dui lobortis vehicula. Donec et dapibus ligula, a bibendum nisl. In hac habitasse platea dictumst. Integer auctor massa vitae mauris fermentum rutrum. Sed urna ligula, tempus eget lectus ac, adipiscing consectetur diam. Cras quis eros vitae ipsum blandit sollicitudin. Curabitur eget ornare ligula, vel pellentesque ipsum. Aliquam volutpat imperdiet ipsum. Sed at orci sit amet nisl elementum pellentesque quis sed dolor. Aliquam nec sem vitae nulla pulvinar viverra. Mauris turpis ipsum, pretium eget neque vel, tempus tempor neque. Etiam malesuada dui sed dui malesuada venenatis. Duis rhoncus id felis in rhoncus. Donec at suscipit erat, sed elementum tortor. Nullam pulvinar, erat quis suscipit placerat, lectus lectus euismod enim, at sollicitudin odio metus at metus. Sed ut enim aliquet, varius enim sit amet, dapibus ipsum.</div>

Here is the Fiddle

我在我的 Ubuntu Chrome 中查看它。

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36

最佳答案

这看起来像是 Chrome 中的一个已知错误: https://code.google.com/p/chromium/issues/detail?id=99358

顺便说一句,stackoverflow 上有一个相关问题:CSS columns breaking when printing

关于html - 多列 CSS 不适用于打印,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25196475/

有关html - 多列 CSS 不适用于打印的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  3. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解,字段“Email”是一个节点,因此调用must_have_css绝对有效!我做错了什么? 最佳答案 通过JonasNicklas得到了答案:No

  4. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  5. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  6. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  7. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  8. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  9. ruby - inverse_of 是否适用于 has_many? - 2

    当我使用has_one时,它​​工作得很好,但在has_many上却不行。在这里您可以看到object_id不同,因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

  10. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

随机推荐