要加在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. EGit系列第三篇——远程提交代码

    接着上篇,把本地项目提交一次才能Pull,为什么要Pull而不直接Remote Push呢,因为本地和远程仓库内容不一样(通常在远程仓库第一次新建项目会带一个README.md), 要先把远程仓库的东 ...

  2. cordova(安卓)(腾讯信鸽注册绑定与反绑定) 插件开发

    腾讯信鸽快速开发指南 http://developer.xg.qq.com/index.php/Android_SDK%E5%BF%AB%E9%80%9F%E6%8C%87%E5%8D%97 本文参考 ...

  3. Spark Gradient-boosted trees (GBTs)梯度提升树

    梯度提升树(GBT)是决策树的集合. GBT迭代地训练决策树以便使损失函数最小化. spark.ml实现支持GBT用于二进制分类和回归,可以使用连续和分类特征. 导入包 import org.apac ...

  4. 7.15python进程锁

    #!/usr/bin/env python #!--*--coding:utf-8 --*-- #!@Time :2018/7/14 17:33 #!@Author TrueNewBee #锁 # 火 ...

  5. 【react】---手动封装一个简易版的redux---【巷子】

    export let createStore = (reducer)=>{ //定义默认的state let state = {}; //定义默认的action let actionTypes ...

  6. Asp.NET调用有道翻译API

    调用有道API进行翻译,如图: HTML: <%@ Page Language="C#" AutoEventWireup="true" CodeFile= ...

  7. .NET Core 中 IOptions 有什么用

    我只发现IOptions的一个用处——方便了在.NET Core应用程序中使用强类型配置. 如果没有IOptions,使用强类型配置需要自己解决下面2个问题: 1)将配置文件(比如appsetting ...

  8. [转载]Invalid bound statement (not found): com.taotao.mapper.TbItemMapper.selectByExample： 错误

    因碰到同样的问题,使用该方法对我有效,为方便以后查找,所以做了转载,原文请查看:https://www.cnblogs.com/fifiyong/p/5795365.html 在Maven工程下,想通 ...

  9. iOS ARC编译器规则和内存管理规则

    iOS 开发当中,自动引用计数已经是标准的内存管理方案.除了一些老旧的项目或者库已经没有人使用手动来管理内存了吧. ARC无疑是把开发者从繁琐的保留/释放引用对象逻辑中解脱出来.但这并不是万事大吉了, ...

  10. MathType怎么打定积分竖线

    MathType怎么打定积分竖线-MathType中文官网 http://www.mathtype.cn/jiqiao/dingjifen-shuxian.html 输入公式后在分隔符模板中选择左竖线 ...