<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

		<title>css超出不换行可滑动</title>

		<style type="text/css">

			.wrapper .list {

				width: 100%;

				height: 20px;

				display: inline;

				white-space: nowrap;

				overflow-x: scroll;

				float: left;

				overflow-y: hidden

			}

			.wrapper .list li {

				display: inline-block;

				margin: 0;

			}

		</style>

	</head>

	<body>

		<div class="wrapper">

			<ul id="list" class="list">

				<li>测试测试测试测试超出不换行可以滑动测试测试测试测试超出不换行可以滑动测试测试测试测试超出不换行可以滑动测试测试测试测试超出不换行可以滑动</li>

			</ul>

		</div>

	</body>

</html>

项目使用场景

css超出不换行可滑动的更多相关文章

  1. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  2. css超出一行添加省略号属性:text-overflow和white-space

    通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...

  3. CSS 超出隐藏问题

    .dropdown-navbar>li:last-child>a { border-bottom: 0 solid #DDD; border-top: 1px dotted transpa ...

  4. css超出2行部分省略号...

    今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用 ...

  5. css样式支持左右滑动要点

    div 包含 ul ,ul 包含 li div宽度固定,ul 宽度随着li的可以无限增加,li 左右滑动的最小容器. div 样式position:relative;width:xxpx;height ...

  6. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  7. css 超出两行省略号,超出一行省略号

    参考:https://www.cnblogs.com/yangguojin/p/10301981.html 超出一行省略: p{ white-space:nowrap; overflow:hidden ...

  8. css超出隐藏显示省略号怎么设置？

    当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...

  9. html+css第八篇滑动门和可爱的css精灵

    滑动门: 滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果. CSS精灵 CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处 ...

随机推荐

  1. 1009在WINDOWS上面如何备份数据库

    第一步 解决windows上面使用GZIP命令 参考http://www.xuebuyuan.com/1676976.html 后经研究,发现解决方法也很简单,只需下载gzip的windows版本,解 ...

  2. HDU 2224 The shortest path

    The shortest path Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  3. study reference

    CVPR2018 ReID论文简评 2017CVPR ICCV和NIPS在Person Reidentification方向的相关工作小结 CVPR 2018 Person Re-ID相关论文 pre ...

  4. HDU 4531

    很容易判断是BFS,可是,呵呵呵呵呵呵......... HASH判重吧,判连通可以用并查集. 以下代码是转别人的,我码了一下午,发觉越码越丑,呵呵了. http://www.cnblogs.com/ ...

  5. HDU 4273

    计算凸包重心到各面的最短距离. 若知道重心,按四面体用体积法即可求出高. 关键在于,多面体重心的求法.这必须把多面体分割成多个四面体来求.下面从多边形的重心说起. 一般来用,对于一个多边形(p0,p1 ...

  6. 怎样在QML中使用multitouch

    在Qt QML中.它能够利用multitouch来做一些我们想做的事情.在今天的文章中.我们将介绍怎样使用multitouch来做一些我们想做的事. 事实上,在QML中利用多点触控是很easy的一件事 ...

  7. POJ1151 Atlantis 【扫描线】

    Atlantis Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16882   Accepted: 6435 Descrip ...

  8. Libgdx: android单机斗地主支持局域网wifi联网的网络模块核心代码

    这个作品是我近期写的,结合我的毕业设计的通信模块和之前的单机版斗地主.我已经上架到豌豆荚了,贴了点广告,看看能不能赚点茶钱. 但是一点也不乐观.因此我想分享给大家源代码. 仅仅要不用于商业. 以下先贴 ...

  9. PHP检测输入数据是否合法常用的类(转)

    <?php class Fun{ function isEmpty($val) { if (!is_string($val)) return false; //是否是字符串类型 if (empt ...

  10. java异常处理和自定义异常利用try和catch让程序继续下去(回来自己再写个例子试运行下)

    注意:想在catch的参数里使用自定义的异常,则必须先将这个异常抛出才行.(throws是具有抛出异常的能力,并未抛出,throw new MyException是抛出异常,catch是捕获异常,只有 ...