学习笔记系列 -css
超出文本框显示为 ...
-
text-overflow:ellipsis;当超过文本框时显示...若是 输入框input只需要这一个属性即可
-white-space : nowarp防止换行 换行默认不会超出文本框 所以会不显示...
-overflow:hidden超出部分隐藏
注意 这三个需要一起使用 （已测ie8 和其他主流浏览器<div>下皆可用）
但是首次使用在input框内没有问题，大概没人用input框做这个效果吧 ，发现输入框的行为很奇怪呀
能成功的可能原因分析
- 输入框 （text）不会换行
- 输入框 超出部分会默认隐藏
html
<body>
<div>
<input type="text" id="content"> 用于输入 但是也有text-overflow
<hr />
<input type="text" class="ellipsis1">输入框input 只有 text-overflow
<hr />
<div class="ellipsis2">
div框 具有三个属性
</div>
</div>
</body>
css
#content{
width: 260px;
height: 30px;
line-height: 30px;
text-align: left;
display: inline-block;
padding: 0;
overflow: hidden;
border: 1px solid #bbb;
text-overflow: ellipsis;
}
.ellipsis1{
width: 260px;
height: 30px;
line-height: 30px;
padding: 0;
border: 1px solid #bbb;
text-overflow: ellipsis;
}
.ellipsis2{
width: 260px;
height: 30px;
line-height: 30px;
padding: 0;
overflow: hidden;
border: 1px solid #bbb;
text-overflow: ellipsis;
white-space: nowrap;
}
js
<script>
var input1 = document.getElementById('content');
var input2 = document.getElementsByClassName('ellipsis')[0];
var text = document.getElementsByClassName('ellipsis')[1]
input1.onchange = function(){
input2.value = input1.value;
text.innerHTML = input1.value;
}
</script>
结果
chorme
chorme
firefox
firefox
输入框从开头显示 有效 只显示文字末尾无效（可能此时认为没有超出末框）
safari
safari
输入框无效
ie8
问题
在ie8下， 不能使用 js的
document.getElementsByClassName
需解决（todo 学习 ）
以下是直接在html中修改
ie8
基础知识学习
分析 input 默认样式(chorme)
input {
-webkit-appearance: textfield; /* 渲染成textfield的风格(?) 火狐 -moz-appearance */
background-color: white;
-webkit-rtl-ordering: logical; /*原始内容按混合顺序排列（需要双向渲染器） (????)*/
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input, textarea, select, button {
text-rendering: auto; /* 根据项目情况进行优化 */
color: initial;
letter-spacing: normal; /* 字母间距 */
word-spacing: normal; /* 单词间距 */
text-transform: none; /* 控制文本的大小写*/
text-indent: 0px; /* 首行缩进*/
text-shadow: none;
/* display: inline-block; */
/* text-align: start; */
margin: 0em;
font: 400 13.3333px Arial;
}
div
display:block
white-space属性设置如何处理元素内的空白
| 值 |描述 |
|: |: :|
|normal |默认。空白会被浏览器忽略。
|pre |空白会被浏览器保留。其行为方式类似 HTML 中的` <pre>` 标签。
|nowrap |文本不会换行，文本会在在同一行上继续，直到遇到` <br> `标签为止。
|pre-wrap |保留空白符序列，但是正常地进行换行。
|pre-line |合并空白符序列，但是保留换行符。
|inherit |规定应该从父元素继承 `white-space` 属性的值。
-
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
text-overflow 属性规定当文本溢出包含元素时发生的事情
| 值 | 描述 |
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| *string* | 使用给定的字符串来代表被修剪的文本。 |
overflow 属性规定当内容溢出元素框时发生的事情
对于 input框无效（？？？）
|值 | 描述
|visible |默认值。内容不会被修剪，会呈现在元素框之外。
|hidden |内容会被修剪，并且其余内容是不可见的。
|scroll |内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
|auto |如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
|inherit |规定应该从父元素继承 overflow 属性的值。
网友评论