css 超出一行显示省略号，table-cell溢出

两个实例，可以直接复制运行。

代码如下

<div class="circle">
    11111123456789
div>
<style>
.circle {
    width: 100px;

    overflow: hidden;   /*超出隐藏*/
    white-space: nowrap; /*强制在同一行显示*/
    text-overflow: ellipsis; /*省略号*/
}
style>

效果：

关于table-cell溢出问题

<div class="test">
    <div class="item">11111222333444div>
div>

<style type="text/css">
.test {
    width: 100px;

    display: table;
    table-layout:fixed;  /*table-layout用来显示表格单元格、行、列的算法规则,fixed表示水平布局仅取决于表格宽度，不填这一项代表水平布局取决于内容*/

    border: 1px solid red;
}

.item {
    width: 100%;
    display: table-cell;

    overflow: hidden;
    word-spacing: nowrap;
    text-overflow: ellipsis;
}
style>

效果：

官网的例子 http://www.w3school.com.cn/tiy/t.asp?f=csse_table_table-layout
截屏官网的例子