Here美元是我的基本问题. 有没有办法实现文本溢出省略只进入输入和全文,当输入集中在下面的屏幕截图?

enter image description here

我try 了Primeflex相关的classes,但似乎没有人达到我的目标.

也适用于下面的属性,try 至少实现标签部分隐藏:

overflow-x: hidden;

它正确地隐藏了溢出的文本,但不幸的是,当输入被聚焦时,它隐藏了浮动标签.

有什么主意吗?

推荐答案

小提琴已经关闭了,所以我无法真正测试您的设置,但此css应该可以工作:

.p-float-label label {
    width: 100px; /* width of the input */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.p-float-label input:focus + label {
    width: auto;
}

因此,当输入没有聚焦时,它将被裁剪到设置的宽度(它应该与您的输入的宽度匹配).当输入聚焦时,将宽度设置为AUTO.

在PrimeNG展示台上测试了这一点.

Html相关问答推荐

如何在两个弹性项目之间添加边框?

卡片上方的文本

CSS动画积分计数器

放大缩小标题在外面的图像

将输入字段下方的两个按钮设置为两侧对齐

我应该怎么做才能显示出整个字符串?

从html文件中提取元素的Python BeautifulSoup

如何使用css创建六边形棋盘?

使用不同字体对齐元素

Angular MatBadge 在高于 99 时不显示完整数字

在span中添加

为什么可滚动弹性项目需要 flex-basis: 0 ?

悬停时宽度从 0 过渡到自动

我如何使用 html 在表格的单元格内实现下面显示的背景 colored颜色 加载器(请判断设计参考的图像链接)

网页爬虫:使用时光机器进行数据采集

Sass 混合动画未正确应用

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白?

更改标签标签的大小

是否可以使 huxtable 输出悬停?

每次按下按钮时减小字体大小的 jquery 函数