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

css代码如下:.contentBox1{width:250px;height:174px;margin:0px;padding:0px;}.contentBox1ull... 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标签文字的前面???
展开
 我来答
依然特雷西sky
高粉答主

2020-04-19 · 繁杂信息太多,你要学会辨别
知道答主
回答量:1511
采纳率:33%
帮助的人:68.5万
展开全部

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内文字超过宽度时,以点点点代替文字显示。

Charles大男人
推荐于2018-02-22 · 知道合伙人软件行家
Charles大男人
知道合伙人软件行家
采纳数:74 获赞数:163
尽我所能,为你解忧。

向TA提问 私信TA
展开全部
.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;
        }
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
lyz810
推荐于2016-09-09 · 知道合伙人互联网行家
lyz810
知道合伙人互联网行家
采纳数:7531 获赞数:31777
前端开发工程师

向TA提问 私信TA
展开全部

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;
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式