<!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. BA-WG-术语

    ActiveX ActiveX 技术 使无论任何语言产生的软件在网络环境中能够实现互操作性的一组技术.ActiveX 建立在 Microsoft 的组件对象模型 (COM) 基础上.尽管 Active ...

  2. UVA Jin Ge Jin Qu hao 12563

    Jin Ge Jin Qu hao (If you smiled when you see the title, this problem is for you ^_^) For those who ...

  3. 反射常用API

    反射所有功能都是通过class API来实现的 class常用API有: 1.class.GETINTERFACES():获得这个类实现的接口. 2.class.getMethods() Method ...

  4. C#带cookie模拟登录百度

    #region 同步通过POST方式发送数据 /// <summary> /// 通过POST方式发送数据 /// </summary> /// <param name= ...

  5. CodeForces - 344A Magnets (模拟题)

    CodeForces - 344A id=46664" style="color:blue; text-decoration:none">Magnets Time ...

  6. Openstack针对nova，cinder，glance使用ceph的虚拟机创建机制优化

     今天在开源中国社区看到有例如以下一个问题: 已经成功把ceph作为cinder和 glance的后端,可是假设作为nova的后端,虚拟机启动速度非常慢,网上查了一下是由于openstack创建虚 ...

  7. java根据内容生成二维码图片

    package util; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; ...

  8. luogu3911 最小公倍数之和

    题目大意 给出一些数\(A_1,A_2,\cdots A_n\),求 \[\sum_{i=1}^{n}\sum_{j=1}^{n}\mathrm{lcm}(A_i,A_j)\] \(A_i,A_n\l ...

  9. oc21--super

    // // Phone.h #import <Foundation/Foundation.h> typedef enum { kFlahlightStatusOpen, kFlahligh ...

  10. k8s 安装并试用Istio service mesh

    本文根据官网的文档整理而成,步骤包括安装istio 0.5.1并创建一个bookinfo的微服务来测试istio的功能. 文中使用的yaml文件可以在kubernetes-handbook的manif ...