Html 正在尝试让css for rails应用程序在float中进行单词包装

我有一些大约20行的文字。大多数线路都很短，但有些线路很长。文本位于一列中，页面有两列。问题是，长线导致与浮动的交互不好。我将一根柱子叠在另一根上面，而不是叠到柱子上

我在谷歌上搜索了一下，我想我应该能够使用word wrap，但将其添加到css中却毫无用处。我错过了什么

这是css

.two{
    float: right;
    width: 45%;
    margin-right: 2.5%;
    margin-left: 2.5%;
    word-wrap: break-word;  
}

如果有更好的办法，我洗耳恭听

---

编辑：这里有一个。

您的页脚设置为100%宽度，这很好，但是您的页脚上有一个2倍的边框。这将使元素的总宽度超过100%，这样它将创建一个滚动条，将宽度更改为98%/99%或像素的确切数量，它应该可以工作，或者只是删除边框。这是一个仅在Chrome中出现的问题

我找到了这篇文章，它给了我解决方案：

我将这些行添加到CSS文件的相应部分，所有这些都已修复

table-layout: fixed;
word-wrap: break-word;  

---

你能给我们一把简单的小提琴吗？我不认为rails和它有任何关系没有问题。链接现在在文章的正文中。这两个表太宽了，无法并排放在包含部分中，但如果我能在第二列中进行换行，它们就不会太宽了，对吗？还是我误解了这个问题？Word wrap是关于到达容器长度的超长单词。在这里看清楚一点：我不认为换行符会影响你的问题。我把页脚缩小到98%，但这只会使页脚变小。我也将其设置为600px，得到了相同的结果。那么，为什么这看起来像是页脚问题，而不是column.two css的问题呢？老实说，我真的说不出来，你在用什么浏览器？我在那把小提琴上没有看到使用Chrome的垂直滚动条我在使用Chrome。我的问题不是垂直滚动条。我希望float right和float left元素彼此相邻，但是当float right的div中有一条长线时，Chrome会将其向下推到float right区域下方。