您可以使用CSS的文本溢出属性来隐藏内容并显示一行。将以下代码添加到您的CSS文件中：
.one-line{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
然后在您的HTML代码中，将这个类应用到需要显示一行并隐藏超出内容的元素上，例如：
php
Copycode
<pclass="one-line">这是一段超出一行的文本内容，将被隐藏并显示一行。</p>
这将导致元素的文本内容在超出一行时被隐藏，并用省略号（...）表示被截断的文本，同时保持一行的显示。
除了使用CSS的文本溢出属性之外，您还可以使用JavaScript来实现这个效果。以下是一种实现方法：
首先，找到需要限制行数的元素，例如一个div，并将它保存到一个变量中：
constelement=document.querySelector('#my-div');
然后，获取该元素的line-height属性值，并将其与该元素的高度相除，以计算出可以显示的最大行数：
constlineHeight=parseInt(getComputedStyle(element).lineHeight);
constmaxHeight=lineHeight*MAX_LINES;
其中，MAX_LINES是您想要显示的最大行数。
接下来，获取该元素的实际高度，并将其与最大高度进行比较。如果实际高度超过了最大高度，就隐藏多余的内容，并添加一个"展开"按钮：
constactualHeight=element.getBoundingClientRect().height;
if(actualHeight>maxHeight){
element.style.maxHeight=maxHeight+'px';
element.classList.add('collapsed');
constbutton=document.createElement('button');
button.innerText='展开';
button.addEventListener('click',()=>{
element.style.maxHeight='';
element.classList.remove('collapsed');
button.style.display='none';
});
element.parentNode.insertBefore(button,element.nextSibling);
}
在上面的代码中，我们通过将max-height属性设置为最大高度来隐藏超出的内容，并将一个名为"collapsed"的类添加到元素中。然后创建一个"展开"按钮，并将它插入到该元素的下一个兄弟节点之前。当用户点击该按钮时，我们将max-height属性设置为空字符串，以便显示所有内容，并将"collapsed"类从元素中删除。
最后，您可以使用CSS来设置"collapsed"类的样式，例如显示省略号：
.collapsed{
overflow:hidden;
text-overflow:ellipsis;
}
这样，当元素超出指定的行数时，它将被截断并显示省略号，同时还会添加一个"展开"按钮，让用户可以查看完整的内容。