<!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. 微信小程序获取登录手机号

    小程序获取登录用户手机号. 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button> 组件的点击来触发. 首先,放置一个 button 按钮,将 ...

  2. RabbitMQ学习总结（1）——基础概念详细介绍

    一.基础概念详细介绍 1.引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松 ...

  3. faster-rcnn代码阅读1

    毫无疑问,faster-rcnn是目标检测领域的一个里程碑式的算法.本文主要是本人阅读python版本的faster-rcnn代码的一个记录,算法的具体原理本文也会有介绍,但是为了对该算法有一个整体性 ...

  4. android高速上手（二）android开发环境搭建及hello world

    基本了解了java语法,下一步.我们一起开启hello world的神奇之旅. (一)android开发环境搭建 之前搭建android开发环境是件很费力的事情,下载Eclipse.安装ADT等,现在 ...

  5. 项目PMO工作

     算起来.这是第一次以项目PMO人员的身份參与项目,尽管非常可惜没有从头參与,也没有參与到项目结束,仅仅有短短的两个月.但对项目PMO也可略窥一斑.如今就当个流水账写一写吧. 进项目组的时候,是中 ...

  6. sikuli运行错误：Traceback (most recent call last):

    错误信息: Traceback (most recent call last): File "C:\Users\wb-cailu.a\AppData\Local\Temp\sikuli-tm ...

  7. SQL SERVER读书笔记：执行计划

    执行计划对性能影响甚大. 系统是怎么得出一个号的执行计划的?主要是依赖于准确的统计信息.统计信息准确的前提下,执行语句重用性高,可避免频繁编译,这也有助于提高性能. 但如果怀疑统计信息不够准确,可以强 ...

  8. oc09--NSString

    // // main.m // 类方法,不可以直接访问对象的属性和方法,类方法中可以直接调用类方法. // NSString基本使用 #import <Foundation/Foundation ...

  9. bzoj3673: 可持久化并查集 by zky&&3674: 可持久化并查集加强版

    主席树可持久化数组,还挺好YY的 然而加强版要路径压缩.. 发现压了都RE 结果看了看数据,默默的把让fx的父亲变成fy反过来让fy的父亲变成fx 搞笑啊 #include<cstdio> ...

  10. 微阅读，不依赖playground，打包成H5版本--案例学习

    微阅读,不依赖playground,打包成H5版本 https://github.com/vczero/weex-yy-h5