[js]纯css强制不换行
要加在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强制不换行的更多相关文章
- css 强制不换行
强制不换行 div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{w ...
- CSS强制中英文换行与不换行
1. word-break:break-all; 只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space ...
- CSS强制英文换行
1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...
- css强制不换行 多出的字省略号
width: 100%;//需要指定宽度 overflow: hidden;//溢出隐藏 text-overflow: ellipsis; white-space: nowrap;//强制不换行 te ...
- 纯css 实现文本换行
业务场景:dialog中嵌套的表单,实现信息展示,由于存储路径过长并且在一行显示,导致多出的文字出现在弹出框外面了,页面极丑,所以需要将存储路径实现自动换行. 技术点:<p style=&quo ...
- 分享：纯 css 瀑布流 和 js 瀑布流
分享一次纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
- CSS自己主动换行、强制不换行、强制断行、超出显示省略号
P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...
- CSS自动换行、强制不换行、强制断行、超出显示省略号
转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...
- CSS样式自动换行(强制换行)与强制不换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...
随机推荐
- SQLServer2008 导出数据库表结构和数据
很多朋友问到sql server数据库”生成脚本”,只导出了数据库的sql脚本,而表里的数据依然没有导出来.很简单,看教程: 注:我这里用的SQLServer2008,其它版本应该差不多. 一.选中要 ...
- vue 本地开发时使用localhost与ip访问
修改config文件夹下面的index.js配置,将localhost改为0.0.0.0就可以了.用ip,127.0.0.1,localhost均行 host: '0.0.0.0', // can b ...
- 终于等到你，最强 IDE Visual Studio 2017 正式版发布
Visual Studio 2017 正式版发布,该版本不仅添加了实时单元测试.实时架构依赖关系验证等新特性,还对许多实用功能进行了改进,如代码导航.IntelliSense.重构.代码修复和调试等等 ...
- Python 读、写、追加csv文件详细以及注意事项
一.利用csv库创建文件 首先导入csv文件 import csv 根据指定的path创建文件: def create_csv(path): with open(path, "w+" ...
- 汇编语言里 eax, ebx, ecx, edx, esi, edi, ebp, esp
eax, ebx, ecx, edx, esi, edi, ebp, esp等都是X86 汇编语言中CPU上的通用寄存器的名称,是32位的寄存器.如果用C语言来解释,可以把这些寄存器当作变量看待. 比 ...
- hdu4847 Wow！Such Doge！【字符串】【暴力】
Wow! Such Doge! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- 查看线程的进程id
import os from threading import Thread def f1(n): print(n) print('%d号线程的id是%s'%(n,os.getpid())) if _ ...
- [No000012F]WPF(7/7) - 样式，触发器和动画
WPF Tutorial : Beginning [^] WPF Tutorial : Layout-Panels-Containers & Layout Transformation [^] ...
- Struts2 框架使用 核心以及其他详细配置
因为在使用SSH框架的过程,关于struts2的配置比较繁琐,所以做个总结. 一.导入并且关联其他XML 1. 因为在核心配置文件(Struts2.xml)中,如果存在很多需要配置的Action项 ...
- create table test_create_table_CreateAs as select * from test_create_table; 表结构的破坏 复制字段结构 复制表结构 LIKE
案例中: 索引丢失.分区丢失 实际测试 Target Server Type : MYSQLTarget Server Version : 50616File Encoding : 65001 Dat ...