css - 文本在 2 列布局中被截断

Question

我使用以下代码允许文本流到第二列。一切都很好，除了字母的顶部在第一列的底部被切掉并且字母的剩余部分出现在第二列的顶部。

.two-column-flow {
column-count: 2;
column-gap: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
height: 150px;
padding-bottom: 10px;
}

单击页面左侧的“功能”选项卡，然后查看“娱乐”部分以了解我在说什么。 http://www.dreamhomevacationrentals.com/hotels/spanish-modern-retreat/

非常感谢任何帮助:)

Answer 1

我刚刚在 Windows Chrome、Firefox 和 IE 上检查了这个问题，结果不同——文本在 Chrome 中被截断，就像你描述的那样，在 IE 中，有问题的文本根本不显示(最后两行——“Game Room”和“VCR”)，在 Firefox 中，2 列仅显示为一列，整个副本应显示在第二列的“娱乐”中，与下面“通信”部分中的副本重叠，最后一个条目“VCR”涵盖“宽带接入”。
我能够通过两项调整为所有提到的浏览器修复此问题:为“.text-wrap”删除“display:inline-block;”(样式中的第 351 行。 css) 并将类“.two-column-flow”的 height:150px; 增加到 height:200px;(样式中的第 109 行.css).
由于我不知道这些样式是否在网站的其他地方使用，我不确定这些调整是否会导致其他问题，但如果能解决当前问题，您可以在娱乐部分添加一个特定的类并将提到的更改仅应用于此类。

更新:对于第一行文本不对齐的后续问题，我刚刚找到了一个解决方案(再次“仅”在 Windows Firefox、Chrome 和 IE 上测试过)- 更改.text-wrap 类的填充(style.css 中的第 351 行):

.text-wrap
{  
  padding: 0 2% 30px;  
}  

到

.text-wrap
{  
  padding: 0 0 30px;  
} 

然后第一行再次对齐显示。
如前所述，我不确定您网站上其他部分的可能后果，因此可以考虑应用所有更改来仅解决 2 列布局的问题，例如到同时具有 .text-wrap 和 .pre-wrapped-text 类的部分(为了完整性，这将是 .text-wrap.pre-wrapped-text 没有空格)或到.two-column-flow .text-wrap(=具有类.text-wrap的元素并且是 .two-column-flow 类元素的子元素。

当我检查这个问题时，我刚刚注意到另一个仅在 Internet Explorer 上的问题 - 你的header .ribbon 已“损坏”，这意味着带有“关于我们聊天我的帐户”的导航不会显示在主导航上方的一行中，而是显示在右侧的上方 - “关于我们“在“联系人”上方，“聊天”与下方的“联系人”和“我的帐户”重叠。这很容易修复 - 它是由 IE 无法处理的 width: initial; 设置引起的。要为 IE 修复此问题而不会对其他浏览器造成任何问题，只需添加 width: auto; before width: initial;。 IE 识别 width: auto; 并且 navi 是固定的，其他浏览器 - 识别宽度设置 - 将忽略宽度的第一个设置并使用 width: initial;。这适用于 2 个设置:header .ribbon(第 42 行)和 .ribbon ul(第 47 行)。作为 header .ribbon 的示例(不是 意味着全部替换，只需添加 width: auto;):

header .ribbon
{
  width: auto;    // for IE
  width: initial; // for the rest, will be ignored by IE
}

作为上述 IE 问题的引用:use initial width for element not working in IE