首页 > 代码库 > css限制单行文本输入,超出部分使用...替换
css限制单行文本输入,超出部分使用...替换
在实际应用中,经常需要只显示一行文字,不允许文字换行破坏整体样式的情况。例如‘商品的名称’,‘简介’等等。但是由于显示器的宽度不一样,会出现后台所给文字内容,一行文本容纳不下的情况。溢出的文本如果使用overflow:hidden生硬的给隐藏掉,显示的效果不是很好,这时,溢出的文本就需要使用省略号...来替换。使用js截取有点儿复杂,可直接使用css的属性进行设置,实现该效果。
需给文本对象添加的css属性如下:
<p class="className">休闲纯色百搭短裤</p>
.className{width: 60px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
显示的效果如下:
css限制单行文本输入,超出部分使用...替换
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。