Css overflow-只有一行文本

我有以下 CSS 风格的 div:

width:335px; float:left; overflow:hidden; padding-left:5px;

当我将一长行文本插入到 div中时，它将换行并显示所有文本。我想要的是只有一行文本不会断行。当文本较长时，我希望这个溢出的文本消失。

我想设置高度，但似乎是错误的。

也许如果我添加的高度是相同的字体，它应该工作，并没有造成任何问题，在不同的浏览器？

我该怎么做？

308285 次浏览
小开
最佳答案

如果要将其限制为一行，请在 div 上使用 white-space: nowrap;。

小开

如果您想指出 div 中还有更多可用的内容，您可能需要显示“省略号”:

text-overflow: ellipsis;

这应该是除了由修道士建议的 white-space: nowrap;。

另外，确保在 Firefox 中检出 这根线来处理这个问题。

小开

我也遇到了同样的问题，我用以下方法解决了它:

display: inline-block;

关于 div的问题。

小开

你可以使用这个 css 代码:

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

CSS 中的 文本溢出属性处理文本在溢出元素框时被剪裁的情况。它可以是 被剪了(即切断，隐藏) ，显示一个 省略号(’...’，Unicode 范围值 U + 2026)。

请注意，只有当容器的溢出属性的值为 藏起来了、 卷轴或 奥托和 空白区域: norap;时，才会出现 文本溢出。

文本溢出只能发生在 拦截或 行内阻塞级别的元素上，因为元素需要有一个宽度才能溢出。溢出发生在由方向属性或相关属性确定的方向上。

小开

用户体验和用户界面的最佳代码是

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
小开

如果要添加请，如果你有一个长文本请你可以使用这个 css 代码下面;

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

使整行文本可见。

小开 
width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

还要定义宽度，以便在一行中设置溢出

小开

我能够通过使用 webkit-line-clamp和下面的 css 实现这一点:

div {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
小开

是的，如果您希望它只有一行高，那么在 div 或列表中使用 white-space: nowrap;。不管你用它来做什么，它都应该起作用。

小开

我用以下方法解决了这个问题:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;


.txt1{width:100px;}
.txt2{width:200px;}
.mytext{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="txt1 mytext">
A B C D E F G H I K L M N O P Q R S T V X Y Z
</div>
<div class="txt2 mytext">
A B C D E F G H I K L M N O P Q R S T V X Y Z
</div>
<div class="txt3 ">
A B C D E F G H I K L M N O P Q R S T V X Y Z
</div>


提交答案