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中网页字体颜色的代码,HTML5画布如何设置字体颜色?（代码示例）
在HTML5画布中我们可以使用fillStyle属性来设置文本的字体颜色,它可以接受一个颜色的代码值,比如#cc0000,也可以接受一个颜色的英文单词,比如red.下面我们就来了解一下,希望对大家有所 ...
html:text中readonly,HTML Input Text readOnly用法及代码示例
HTML DOM中的Input Text readOnly属性用于设置或返回文本字段是否应为只读.这意味着用户无法修改或更改特定元素中已经存在的内容(但是,用户可以对其进行制表,突出显示并从中复制文本 ...
html input url,HTML Input URL name用法及代码示例
HTML DOM中的DOM输入URL名称属性用于设置或返回URL字段的name属性的值.每个输入字段都需要name属性.如果未在输入字段中指定name属性,则将根本不发送该字段的数据. 用法: 它返回 ...
html5 input min,HTML Input Time min用法及代码示例
DOM Input Time min属性用于设置或返回数字字段的min属性的值. min属性定义输入时间字段的最短时间. 用法: 它返回min属性.timeObject.min 用于设置min属性.t ...
upload组件获得焦点_HTML Input FileUpload autofocus用法及代码示例
HTML DOM中的Input FileUpload autofocus属性用于设置或返回在页面加载时文件上传按钮是否应自动获得焦点. 用法: 返回自动对焦属性: fileuploadObject.a ...
html中input里的time怎么用,HTML Input Time stepDown()用法及代码示例
HTML DOM中的DOM输入时间stepDown()方法用于将时间字段的值减少给定数字.它只会影响分钟数(而不是小时,秒或毫秒). 用法: timeObject.stepDown(number) 参 ...
html range关联文本框,HTML Input Range type用法及代码示例
HTML DOM中的DOM输入范围类型属性用于返回滑块控件属于哪种类型的表单元素.所有浏览器均应返回"range".而Internet Explorer始终返回"text ...
html中text的maxlength,HTML Input Text maxLength用法及代码示例
HTML DOM中的DOM输入文本maxLength属性用于设置或返回文本输入字段的maxlength属性值.它指定了文本字段中允许的最大字符数.输入电子邮件的maxLength属性的默认值为5242 ...
html文本框带按钮代码,HTML Input Button value用法及代码示例
HTML DOM中的DOM输入按钮值属性用于设置或返回Button字段的value属性的值. value属性指定在Button上显示的文本. 用法: 它返回value属性.buttonObject.v ...

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

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

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

最新文章

热门文章