html隐藏超出文本框,css 【text-overflow】 实现超出文本框显示为 ...

学习笔记系列 -css

超出文本框显示为 ...

text-overflow:ellipsis; 当超过文本框时显示 ... 若是 输入框 input只需要这一个属性即可

-white-space : nowarp 防止换行 换行默认不会超出文本框 所以会不显示...

-overflow:hidden 超出部分隐藏

注意 这三个需要一起使用 (已测ie8 和其他主流浏览器

下皆可用)

但是首次使用在input框内没有问题，大概没人用input框做这个效果吧 ，发现输入框的行为很奇怪呀

能成功的可能原因分析

输入框 (text)不会换行

输入框 超出部分会默认隐藏

html

用于输入 但是也有text-overflow

---

输入框input 只有 text-overflow

---

div框 具有三个属性

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

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;

}

结果

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 中的`

` 标签。

|nowrap |文本不会换行，文本会在在同一行上继续，直到遇到`
`标签为止。

|pre-wrap |保留空白符序列，但是正常地进行换行。

|pre-line |合并空白符序列，但是保留换行符。

|inherit |规定应该从父元素继承 `white-space` 属性的值。

注释：任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

text-overflow 属性规定当文本溢出包含元素时发生的事情

| 值 | 描述 |

| clip | 修剪文本。 |

| ellipsis | 显示省略符号来代表被修剪的文本。 |

| *string* | 使用给定的字符串来代表被修剪的文本。 |

overflow 属性规定当内容溢出元素框时发生的事情

对于 input框无效(？？？)

|值 | 描述

|visible |默认值。内容不会被修剪，会呈现在元素框之外。

|hidden |内容会被修剪，并且其余内容是不可见的。

|scroll |内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

|auto |如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

|inherit |规定应该从父元素继承 overflow 属性的值。