我有一个Rails应用程序，它允许用户输入一些HTML格式的文本(P、OL、UL、BLOCKQUOTE)。我现在想显示此文本的简短摘要，但要确保我只显示 最佳答案 如果我对你的理解是正确的，你想要显示一种用户在文本区域中键入的文本的HTML预览，例如在stackoverflow上显示在文本区域下方的预览。可能最简单的方法是使用CSS。#preview{height:4em;overflow:hidden;}如果行高正常，那应该可以工作。那当然只是隐藏了额外的文本。如果隐藏是NotAcceptable并且您必须只从Ruby生成4行来显
我可能是第一个发现它的人(或者至少在网络上记录它):HTML:VerticallyAlignedTextCSS:div{height:100px;/*orwhatever%etc.*/}div>span{display:inline-block;visibility:hidden;height:100%;vertical-align:middle;}之所以有效，是因为代码将行高增加到其容器的100%，但我不明白为什么要设置vertical-align:middle;在上影响文本。我没有在网上找到这个解决方案的文档，它比我找到的其他解决方案更简单、更灵活。此外，它应该适用于从IE6开始的
我可能是第一个发现它的人(或者至少在网络上记录它):HTML:VerticallyAlignedTextCSS:div{height:100px;/*orwhatever%etc.*/}div>span{display:inline-block;visibility:hidden;height:100%;vertical-align:middle;}之所以有效，是因为代码将行高增加到其容器的100%，但我不明白为什么要设置vertical-align:middle;在上影响文本。我没有在网上找到这个解决方案的文档，它比我找到的其他解决方案更简单、更灵活。此外，它应该适用于从IE6开始的
我正在尝试为以下布局创建CSS。这与表格非常相似，但我使用它来呈现不包含表格数据的XML。我想要两列或多列以及贯穿这些列的一条或多条水平线(不可见线)。规则之间的垂直间距与表格的行高完全一样，由该行单元格中内容的最大高度决定。此“表格”中的所有“单元格”都包含两个可选block。上面的block在上面的规则下方对齐。下面的block在下面的规则上方对齐。这是一个例子:上面和下面的block都是可选的，因此每个“单元格”都将具有以下配置之一。block没有固定的高度；它们可能包含根据“单元格”的宽度换行的文本。因为这很像一张table，所以我尝试用display:table渲染它.第一个
我正在尝试为以下布局创建CSS。这与表格非常相似，但我使用它来呈现不包含表格数据的XML。我想要两列或多列以及贯穿这些列的一条或多条水平线(不可见线)。规则之间的垂直间距与表格的行高完全一样，由该行单元格中内容的最大高度决定。此“表格”中的所有“单元格”都包含两个可选block。上面的block在上面的规则下方对齐。下面的block在下面的规则上方对齐。这是一个例子:上面和下面的block都是可选的，因此每个“单元格”都将具有以下配置之一。block没有固定的高度；它们可能包含根据“单元格”的宽度换行的文本。因为这很像一张table，所以我尝试用display:table渲染它.第一个
我在将页脚粘贴到视口(viewport)底部时遇到问题。我尝试不同的方法，在这里阅读页脚主题，阅读stickyfooter网站，尝试但没有运气，google太多了，所以我从我的网站剪切的问题代码可以在那里测试:https://jsfiddle.net/26hf8sh2/结构是.........如果内容不多，我希望扩展主block以适应页脚，如果内容再次不足，我希望将页脚粘贴到视口(viewport)底部，当我尝试绝对定位时，当我更改浏览器大小时，页脚与内容重叠。另外，如果我尝试使用最小高度之类的东西，那么在有很多内容页脚的地方似乎与视口(viewport)底部的内容和位置重叠，但不在页
我在将页脚粘贴到视口(viewport)底部时遇到问题。我尝试不同的方法，在这里阅读页脚主题，阅读stickyfooter网站，尝试但没有运气，google太多了，所以我从我的网站剪切的问题代码可以在那里测试:https://jsfiddle.net/26hf8sh2/结构是.........如果内容不多，我希望扩展主block以适应页脚，如果内容再次不足，我希望将页脚粘贴到视口(viewport)底部，当我尝试绝对定位时，当我更改浏览器大小时，页脚与内容重叠。另外，如果我尝试使用最小高度之类的东西，那么在有很多内容页脚的地方似乎与视口(viewport)底部的内容和位置重叠，但不在页
有一个包含多个元素的菜单。每个元素都有一行内容，与它的中心对齐。但是突然添加了一个两行内容的元素。根据设计计划，这个两行的元素内容元素仍然应该与父元素的中心对齐，但是这个元素内容元素中的文本应该左对齐:how-it-should-look此外，元素是响应式的，元素内容可能会针对此元素和其他元素发生变化-因此仅对元素内容使用固定宽度是不合适的。以thiscode开头:Alignelementwitmultilinetexttothecenterofparentblockpreservinglefttext-alignment.list-item{border:1pxsolid#999;p
有一个包含多个元素的菜单。每个元素都有一行内容，与它的中心对齐。但是突然添加了一个两行内容的元素。根据设计计划，这个两行的元素内容元素仍然应该与父元素的中心对齐，但是这个元素内容元素中的文本应该左对齐:how-it-should-look此外，元素是响应式的，元素内容可能会针对此元素和其他元素发生变化-因此仅对元素内容使用固定宽度是不合适的。以thiscode开头:Alignelementwitmultilinetexttothecenterofparentblockpreservinglefttext-alignment.list-item{border:1pxsolid#999;p
我有一个基于TwitterBootstrap的简单3列布局。唯一的问题是，每根柱子都是由不同高度的block组装而成的。.它工作得很好，除了小显示器。那么block的顺序就不排序了。有没有什么方法可以在没有任何JavaScript的情况下实现排序block？ 最佳答案 3列结构无法实现此效果。如果所有block的高度都相同，那么您可以float:将所有block都留在没有列的位置，然后它们将按顺序换行。由于它们的大小不同，因此您必须使用JavaScript，例如masonry:http://masonry.desandro.com/
