礼拜三log~CSS控制文本不换行＋省略号 & li宽度无效的解决方法 & 在js中获取后台变量

原创于 2016-03-30 15:34:28 发布 · 545 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

227 篇文章

订阅专栏

本文介绍如何使用CSS实现文本不换行并添加省略号效果，同时提供了解决li元素宽度失效的问题方案。此外，还展示了如何在JavaScript中通过JSP标签获取后台传递的数组变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS控制文本不换行＋省略号

    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...),需与overflow:hidden;一起使用。*/

li宽度无效的解决方法

使用列表li制作导航栏时，若定义li的一个属性为:li{display:inline ; width:83px; height:30px;}，则浏览器会无视后面的高和宽属性的定义。
解决的方法为：将display:inline ,改成 display:block;加上float:left; 即可正常，完整的应为：li{display:block; float:left; margin-right:5px; width:83px; height:30px; } 这样定义的宽高都可生效。

在js中获取后台变量

<script>
    var array = new Array();
    <c:forEach items="${addrList}" var="addr">
        array.push("${addr}")
    </c:forEach>
    var l =  array.length; 
    var appendContent = "";
    //alert(l);
    for(var i=0;i<l;i++){
        appendContent += "<a>"+array[i]+"&nbsp&nbsp&nbsp"+"</a>";
    }
    $(".active").html(appendContent);
</script>