需要用javascript扩展多行，文本溢出答案

【问题标题】：Need to expand multiple lines with javascript, text overflow需要用javascript扩展多行，文本溢出
【发布时间】：2016-07-23 04:08:19
【问题描述】：

http://jsfiddle.net/10h8t3ah/

function changeHeight(rowNum) {
  document.getElementById("demo").style.height= "70px";
  var fooBar = document.getElementById(rowNum);
  fooBar.style.height = "100px";
}

我在这里尝试完成的是通过定义为 row1、row2、row3 和 row4 作为 rowNum 的变量，它将改变链接和段落的高度以及相应的 row#。

我正在尝试同时传递段落和链接的 ID，这样如果您将鼠标悬停在链接上，反之亦然，高度将会改变。

基本上，如果您将鼠标悬停在链接或段落上，相应的并排容器将在高度上扩展，并且段落中的文本将可见。我用 break word 的 wrap-text 属性设置的段落文本，但它似乎只是溢出了。

【问题讨论】：

标签： javascript html css

【解决方案1】：

好的 - 有几个概念需要更正才能理解为什么这不起作用：

DOM 对象的 id 必须是唯一的 （您的 jsfiddle 在两个“行”上使用相同的 ID - 我已更新您的代码以使用 class 而不是一个 id 以便）
你传递给changeHeight函数的参数必须是一个字符串（如果你传递row1，那么row1必须是一个定义的变量，而不是你应该传递'row1' -- 再次，请参阅我更新的小提琴代码）

我认为这是一个 jsfiddle，它可以满足您的大部分需求：http://jsfiddle.net/zwyr4hn1/10/

我还解决了一些小问题： 1. 当新的行悬停时，您需要将其他行返回到较小的大小（我已经在所有行对象上使用了 row 类来执行此操作） 2. 这个 css需要让您的 a 对象以您想要的方式调整大小：a { display: inline-block; }

我没有解决你提到的换行问题，因为我在 jsfiddle 上没有看到。

【讨论】：

哇，这太完美了！谢谢！我将尝试找出我在使用 wrap-text 时遇到的问题，这可能是唯一 ID 的问题，我在这里的 jsfiddle 中重新编写了我的实际代码，看看我是否做错了什么。
不客气。感谢您接受答案。我也可以要求您对答案进行投票吗？
但这就是我所说的 word-wrap: break-word; 没有包装，我包括 display:inline-block jsfiddle.net/ux33e1s4/4 我想给每个人投票，但我没有声誉
声誉限制 - 当然 - 不用担心。对于您的包装问题，请将以下内容添加到您的 CSS 中：p: { word-break: break-all; white-space: normal; overflow: hidden; }

【解决方案2】：

与其自己设计复杂的 JavaScript 函数，不如使用手风琴来扩展内容。这是专门为这些目的设计的 Bootstrap 框架手风琴。

链接到您可以了解更多信息的页面。

http://www.w3schools.com/bootstrap/bootstrap_collapse.asp

【讨论】：