input标签placeholder过长省略号显示

虽然input标签的placeholder可以用如下方式设置
input::-webkit-input-placeholder { /* Chrome/Opera/Safari /
color: red;
}
input::-moz-placeholder { /
 Firefox 19+ /
color: red;
}
input:-ms-input-placeholder { /
 IE 10+ /
color: red;
}
input:-moz-placeholder { /
 Firefox 18- */
color: red;
}
但placeholder过长用省略号的问题需要设置到input上
input {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

原文地址:https://www.cnblogs.com/anguoff/p/11247282.html

时间: 2024-10-14 15:21:34

input标签placeholder过长省略号显示的相关文章

table中td内容过长 省略号显示

首先设置 css样式: table { table-layout: fixed;} HTML中的table代码: <tr> <th class="col-md-1">用户ID</th> <th class="col-md-1">用户名</th> <th class="col-md-1">联系电话</th> <th class="col-md-1&q

CSS自动截断表格内的长字符 以省略号显示

CSS自动截断表格内的长字符,以省略号显示,大家可能在一些网站看到过这样的效果,目的是让表格或布局更美观一些,但是不利于阅读,如果您可以能该属性加上title或链接的话那就利于网站体验了,您说是吗? <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上谷战

关于input标签和placeholder在IE8,9下的兼容问题

一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移动端的项目中. 二. IE10+浏览器下,input标签会有一个默认的样式,比如文本框的'×'号,密码框的小眼睛.初衷是好的,有时候很方便,但有时候我们会自己设置样式和功能.可以用伪元素方法去除: ::-ms-clear, ::-ms-reveal{display: none;} 三. 在低版本的I

echart的label标签文字过长显示不全怎么办?

echart的官方只提供label标签文字过长是斜着显示的方式,并且文字显示不全重叠等现象.那么只能自己的方式来实现. option = { title : { text: '世界人口总量', subtext: '数据来自网络' }, tooltip : { trigger: 'axis' }, legend: { data:['2011年', '2012年'] }, toolbox: { show : true, feature : { mark : {show: true}, dataVie

过长文字自动换行或者超长省略号显示

<div>hghghhgghghghhghghgghghhg</div> css:div{width:100px;} 超长部分省略号显示:/*超出部分不显示*/overflow: hidden;                /*超出部分省略号显示*/text-overflow: ellipsis; 注:如果div中的内容存在空格,则会自动换行 阻止自动换行:white-space: nowrap;

HTML简单登录和注册页面及input标签诠释

今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容: HTML是一种超文本标记语言.HTML 标签是由尖括号包围的关键词,比如 <html>.HTML 标签通常是成对出现的,比如 <b> 和 </b>: <html> 与 </html> 之间的文本描述网页: <body> 与 </body> 之间的文

angular input标签只能单向传递数据的问题

angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%;margin-top: 45px " ng-init = "init()"> <ion-pane> <ion-content zooming = "true" class = "no-header"> <

html5中form表单新增属性以及改良的input标签元素的种类

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" /> <!-- 在不支持h5的浏览器中,可以用CSS样式进行改写 --> &

CSS截取字符串,多余文字用省略号显示

最近才知道css也有这么叼炸天的一面~~~ 做个类似论坛的页面,用户头像70px,但是用户名没法限定啊,英文中文都可以,你说他要是取个"我的名字好长呀,你该怎么办呢",那老衲不就蛋疼菊花紧了~~ 幸好,老衲于不幸中的万幸中发现了css这么叼炸天的一面,以前一直不知道,写出来分享给大家 很简单,大屁不多放,直接开菊花: css里面如下设置: a.name{ line-height: 30px; text-align: center; text-overflow:ellipsis;//让超