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

学习笔记系列 -css

超出文本框显示为 ...

• text-overflow:ellipsis; 当超过文本框时显示 ... 若是 输入框 input只需要这一个属性即可
  -white-space : nowarp 防止换行 换行默认不会超出文本框 所以会不显示...
  -overflow:hidden 超出部分隐藏

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

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

能成功的可能原因分析

1. 输入框 （text）不会换行
2. 输入框 超出部分会默认隐藏

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

结果
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 属性的值。