php 超出省略号,input实现文字超出省略号（代码示例）

本篇文章给大家带来的内容是关于input实现文字超出省略号(代码示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

input实现文字省略号功能

普通元素实现文字超出宽度自动变成省略号非常简单，给元素加个宽度，然后再加这三句css即可：white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

有没有想过给input="text"元素也加这个效果呢？如图：

input实现文字超出省略号功能

margin: 0;

padding: 0;

}

.box{

width: 200px;

padding: 15px;

border: 1px solid #f60;

margin: 50px auto;

}

.form-control{

height: 30px;

line-height: 30px;

padding: 5px 10px;

}

.text-ellipsis{

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

h2{

width: 300px;

margin: 10px auto;

}

文字超出宽度自动变成省略号

其实，让input实现文字超出自动变省略号也非常简单，还是那三段代码。经测试，目前(2018-11-23)为止，只有最新的Chrome、Firefox两个浏览器支持，移动端未测试！

php 超出省略号,input实现文字超出省略号（代码示例）相关推荐

php 文字超出画布,input实现文字超出省略号（代码示例）
本篇文章给大家带来的内容是关于input实现文字超出省略号(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. input实现文字省略号功能普通元素实现文字超出宽度自动变成省 ...
input实现文字超出省略号功能
input实现文字省略号功能普通元素实现文字超出宽度自动变成省略号非常简单,给元素加个宽度,然后再加这三句css即可: white-space: nowrap;text-overflow: elli ...
php实现一行省略号,css实现文字溢出省略号的四种方法（附代码）
本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加 ...
微信小程序页面文字超出一行隐藏，文字超出两行隐藏。
页面文字超出一行隐藏,如图所示: wxml <view class="listcbsTitle" >卡通书签卡通书签卡通书签卡通书签卡通书签卡通书签卡通书签</v ...
div超出不换行_文字超出显示点点点之ellipsis 设置
一般情况下一行文字在一定区域显示的话如果不限定高度,那么在内容超过的宽度的话就会换行显示,为了页面的美观,目前的通用做法就是在最后显示-,然后鼠标悬浮显示完整内容,具体设置如下: height: 40 ...
html字体超出后隐藏省略号,CSS控制文字超出部分省略号显示
一:单行文本显示不完时,我们只需要设置单行文本的宽度,不允许换行,溢出隐藏及换行省略四个属性即可: p{ max-width: 100px; overflow:hidden; text-overflo ...
html 文字超出部分,CSS控制文字超出部分显示省略号方法
我们经常会看到有些网站比较长的字符就会显示省略号了,实现这种效果有两个办法,一种利用程序截取字符,另一种利用css实现超出部分显示省略号,下面我来介绍第二种. 测试浏览器: IE6/7/8/9.ope ...
vue 超出三行隐藏_文字超出三行省略...显示全文
1.在开发过程中,我们经常会用到这种超出三行显示...的要求,使用css属性是可以的,但是需要考虑兼容性问题实现单行文本的溢出显示省略号,我们应该都知道用text-overflow:ellipsis ...
html文字超出不换行,css文字超出不换行如何设置？
white-space,英语词组意思为空余时间,在计算机术语中的意思是泛空格符.white-space 属性设置如何处理元素内的空白. css可以使用white-space属性设置超出不换行. whi ...

php 超出省略号,input实现文字超出省略号（代码示例）

文字超出宽度自动变成省略号

php 超出省略号,input实现文字超出省略号（代码示例）相关推荐

最新文章

热门文章