Question

css处理文字过长时显示为多余部分省略

css代码如下：
.contentBox1{ width:250px; height:174px; margin:0px; padding:0px; }
.contentBox1 ul li{
float:left;
height:auto;
width:250px;
text-decoration:none;
}
.contentBox1 ul li a{
float:left;
height:20px;
width:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#000;
}
.contentBox1 ul li span{
float:right;
font-family:"微软雅黑";
font-size:14px;
font-weight:bold;
color:#03C;
}
在HTML中的代码是：
<div class="contentBox1">
<ul>
<li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a><span>2014.12.16</span></li>
<li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a><span>2014.12.16</span></li>
<li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a><span>2014.12.16</span></li>
</ul>
</div>
我得到的结果是：

提问：怎么把li的点点放到a标签文字的前面？？？

Answer 1

1、新建一个html文件，命名为test.html。

2、在test.html文件内，创建一个包含文字的div，并设置div的class属性为content，主要用于对div进行css样式设置。

3、在test.html文件内，对类名为content的div进行样式设置，代码如下。

4、在css内，设置div的宽度为130px，同时设置其浮动向左，居左对齐。

5、在css内，设置div内的文字不换行，当文字超过宽度width时，隐藏文字。

6、在css内，设置div内文字超过宽度时，以点点点代替文字显示。

Answer 2

.contentBox1 ul li{
            float:left;
            height:auto;
            width:250px;
            text-decoration:none;
            list-style-position: inside;
        }
.contentBox1 ul li a{
            /*float:left;*/
            display: inline-block;
            height:20px;
            width:150px;
            font-family:Arial, Helvetica, sans-serif;
            font-size:14px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            color:#000;
        }

追问

虽然可以使得点点在最前面了，可是不在一条线上了。如下图所示：

追答

        .contentBox1 ul li a{
            display: inline-block;
            height: 20px;
            margin-bottom: -7px;//这是新加的
            width:150px;
            font-family:Arial, Helvetica, sans-serif;
            font-size:14px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            color:#000;
        }

Answer 3

test-overflow属性可以定义文本溢出容器时如何显示，具体用法如下：

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

默认值：clip

语法：text-overflow: clip|ellipsis|string;

允许的值：

clip：修剪文本。

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

示例：

<div style="width:20px;">文字内容超过20px就会显示为三个点</div>

div{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}