我有一个包含大量文本的网站。为了使其在打印时更具可读性，我想创建一个分页的双列布局，也就是说，我希望每页两列，第一列的文本应该换行到第二列，然后从第二列开始到下一页(而不是将两个非常高的列分成几页):
Wanted Not Wanted
1 2 1 4
--- ---
3 4 2 5
--- ---
5 6 3 6
有人有这方面的工作示例吗？
最佳答案
你可以使用这个css
@media print {
body{
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
}
您也可以添加单个列标题。
CSS
@media print {
.two {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
.one {
column-count: 1;
-webkit-column-count: 1;
-moz-column-count: 1;
}
}
HTML
<section class="one">
<h1>My awesome project</h1>
</section>
<section class="two">
Very long content
</section>
Example
h1 {
text-align: center
}
count::before {
counter-increment: section;
content: "\A I am flag " counter(section) ".\A ";
font-weight: bold;
white-space: pre;
}
@media print {
.two {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
.one {
column-count: 1;
-webkit-column-count: 1;
-moz-column-count: 1;
}
input[type="button"] {
display: none
}
}<input type="button" onclick="print()" value=" --> Click Here to print! <--">
<section class="one">
<h1>My awesome project</h1>
<h2>Chapter 1</h2>
</section>
<section class="two">
<count/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus sodales. Sed mattis sed
felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus sed, facilisis condimentum
nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit bibendum. Sed condimentum,
mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus. Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae
dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris
vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo, consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus
vehicula. Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est,
eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et
fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper ut congue a, consequat eu turpis.
<count/>
Nunc rutrum erat eget lorem vehicula blandit. Vivamus dictum sem diam, semper pellentesque ipsum finibus suscipit. Aenean fringilla dapibus felis, vitae faucibus lectus ultrices a. Etiam et mi eget ex posuere venenatis. Vestibulum efficitur lacinia augue
vel scelerisque. Nunc cursus nisl a odio laoreet, sit amet ornare risus faucibus. Nulla facilisi. Ut aliquam egestas justo, id dignissim urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas
ut elementum mi, eget varius sapien. Praesent lectus purus, vehicula euismod fringilla vestibulum, iaculis quis dui. In elit augue, aliquam nec nisi at, vehicula sodales tortor. Proin feugiat blandit eros, at elementum erat. Etiam mi orci, euismod vitae
mollis vel, facilisis in ipsum. Donec porta dolor sed hendrerit tempor. Morbi et eros sit amet lorem tristique luctus sed non felis. Aenean eros dui, hendrerit sed odio quis, cursus sollicitudin felis. Nullam tincidunt sed mi nec dictum. Curabitur velit
purus, gravida nec luctus at, vehicula ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vitae est eu ipsum scelerisque ullamcorper sit amet commodo elit. Nulla ut commodo tortor.
<count/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus sodales. Sed mattis sed
felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus sed, facilisis condimentum
nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit bibendum. Sed condimentum,
mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus. Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae
dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris
vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo, consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus
vehicula.
<count/>
Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est, eu malesuada
sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et fringilla. Vivamus
et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper ut congue a, consequat eu turpis. Nunc rutrum erat eget lorem vehicula blandit. Vivamus dictum sem diam, semper pellentesque ipsum finibus suscipit. Aenean fringilla dapibus
felis, vitae faucibus lectus ultrices a. Etiam et mi eget ex posuere venenatis. Vestibulum efficitur lacinia augue vel scelerisque. Nunc cursus nisl a odio laoreet, sit amet ornare risus faucibus. Nulla facilisi. Ut aliquam egestas justo, id dignissim
urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ut elementum mi, eget varius sapien. Praesent lectus purus, vehicula euismod fringilla vestibulum, iaculis quis dui. In elit augue,
aliquam nec nisi at, vehicula sodales tortor. Proin feugiat blandit eros, at elementum erat.
<count/>
Etiam mi orci, euismod vitae mollis vel, facilisis in ipsum. Donec porta dolor sed hendrerit tempor. Morbi et eros sit amet lorem tristique luctus sed non felis. Aenean eros dui, hendrerit sed odio quis, cursus sollicitudin felis. Nullam tincidunt sed
mi nec dictum. Curabitur velit purus, gravida nec luctus at, vehicula ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vitae est eu ipsum scelerisque ullamcorper sit amet commodo elit. Nulla
ut commodo tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus
sodales. Sed mattis sed felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus
sed, facilisis condimentum nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit
bibendum. Sed condimentum, mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus.
<count/>
Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque
lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo,
consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus vehicula. Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis.
Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est, eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus
convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper
ut congue a, consequat eu turpis.
<count/>
Nunc rutrum erat eget lorem vehicula blandit. Vivamus dictum sem diam, semper pellentesque ipsum finibus suscipit. Aenean fringilla dapibus felis, vitae faucibus lectus ultrices a. Etiam et mi eget ex posuere venenatis. Vestibulum efficitur lacinia augue
vel scelerisque. Nunc cursus nisl a odio laoreet, sit amet ornare risus faucibus. Nulla facilisi. Ut aliquam egestas justo, id dignissim urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas
ut elementum mi, eget varius sapien. Praesent lectus purus, vehicula euismod fringilla vestibulum, iaculis quis dui. In elit augue, aliquam nec nisi at, vehicula sodales tortor. Proin feugiat blandit eros, at elementum erat.
</section>
<input type="button" onclick="print()" value=" --> Click Here to print! <--">
关于html - 用于打印的两列布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4655572/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
当我使用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
我正在学习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)'
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda