要加在li上

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 100px;

            height: 200px;

            border: 1px solid red;

            padding: 20px;

            line-height: 30px;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }

        ul li {

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }

    </style>

</head>

<body>

<div>

    <ul id="ul1">

        <li>1, test1</li>

        <li>2, test2</li>

        <li>3, test3</li>

    </ul>

</div>

<script src="data.js"></script>

<script>

    //

    var oUl = document.getElementById('ul1');

    var OLis = document.getElementsByTagName('li');

    for (var i = 0; i < OLis.length; i++) {

        OLis[i].onmouseover = function () {

            this.style.backgroundColor = "pink";

        };

        OLis[i].onmouseout = function () {

            this.style.backgroundColor = '';

        };

    }

    var oFrm = document.createDocumentFragment();

    for (var i = 0; i < arr.length; i++) {

        var oLi = document.createElement('li');

        oLi.innerHTML = '<li>' + arr[i].title + '----' + arr[i].desc + '</li>';

        oFrm.appendChild(oLi);

    }

    oUl.appendChild(oFrm);

</script>

</body>

</html>

[js]纯css强制不换行的更多相关文章

  1. css 强制不换行

    强制不换行 div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{w ...

  2. CSS强制中英文换行与不换行

    1. word-break:break-all; 只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space ...

  3. CSS强制英文换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...

  4. css强制不换行 多出的字省略号

    width: 100%;//需要指定宽度 overflow: hidden;//溢出隐藏 text-overflow: ellipsis; white-space: nowrap;//强制不换行 te ...

  5. 纯css 实现文本换行

    业务场景:dialog中嵌套的表单,实现信息展示,由于存储路径过长并且在一行显示,导致多出的文字出现在弹出框外面了,页面极丑,所以需要将存储路径实现自动换行. 技术点:<p style=&quo ...

  6. 分享：纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  7. CSS自己主动换行、强制不换行、强制断行、超出显示省略号

    P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...

  8. CSS自动换行、强制不换行、强制断行、超出显示省略号

    转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...

  9. CSS样式自动换行(强制换行)与强制不换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

随机推荐

  1. Qt编写通用主界面V2019

    其实是2018年做出来的这个界面效果,用该界面做了三四个项目,今天抽空特意提取出来单独的demo,集成到了皮肤生成器中.

  2. 关于删除 hao123 主页设置的一点经验

    :first-child { margin-top: 0px; } blockquote>:last-child { margin-bottom: 0px; } --> 说一说关于删除 h ...

  3. isinstance函数

    isinstance isinstance(object, classinfo) 判断实例是否是这个类或者object是变量 classinfo 是类型(tuple,dict,int,float,bo ...

  4. WPF 打开指定文件路径的文件资源管理器

    x 需求是想让WPF打开一个指定文件路径的文件夹,但是搜出来的八成都是<打开文件>的这样的↓ Microsoft.Win32.OpenFileDialog open_file = new ...

  5. Lombok安装及使用

    为什么要使用Lombok: 虽然一般的IDE(eclipse,Intellij)都有自动生成代码的功能,如:生成setter,getter,toString,equels,hashcode等.但是如果 ...

  6. shell脚本之xargs使用的一些案例

    首先看一下文本信息: # cat text1.txt 1 2 3 4 5 使用xargs格式化一下: # cat text1.txt  | xargs 1 2 3 4 5 使用xargs格式化,每两个 ...

  7. shell脚本之使用sed和awk进行文本处理

    Shell这种脚本语言特点是,结果松散,场景复杂,针对于一些参数都有特殊意义.针对于大部分工程师而言,使用中的情况是你可能会经常忘记参数或其意义,使你不得不查阅man或网上寻求帮助.此篇文档作用就是在 ...

  8. vue $set的使用

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新 ...

  9. python找出数组中第二大的数

    #!usr/bin/env python #encoding:utf-8 ''''' __Author__:沂水寒城 功能:找出数组中第2大的数字 ''' def find_Second_large_ ...

  10. 内部排序->选择排序->简单选择排序

    文字描述 简单排序的基本思想是:每一趟在n-i+1(i=1,2,…,n)个记录中选取关键字最小的记录作为有序列表中的第i个记录. 示意图 略 算法分析 简单排序算法中,所需进行记录移动的操作次数较少, ...