white-space 标签使用

white-space MSD定义为：是用来设置如何处理元素中的空白

其使用场景有很多，比如：横向滑动，超出显示省略号，输出空格显示空格等

1.横向滑动　

在写手机页面的过程中，我想大部分人都遇到横向滑动的问题，今天我们就来讨论一下横向滑动，其css核心为：white-space、

　　１.首先定义一个父容器宽度，

　　 2.设置子元素个数，使其超过父容器宽度

　　 3.父元素设置white-space：nowarp， overflow：hidden或 overflow-y：hidden即可

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css实现图片横向排列，溢出隐藏横向滚动</title>

<style type="text/css">

	.box{width:670px;height:395px;white-space:nowrap;overflow-x:auto;overflow-y:hidden;}

	.box span{display: inline-block;width: 600px;height:395px;background-color: red;}

</style>

</head>

<body>

<div class="box">

	<span></span>

	<span></span>

	<span></span>

	<span></span>

</div>

</body>

</html>

　　如下图

2.超出显示省略号

　　原理：1. 先让父元素设置超出隐藏，overflow：hidden。2.再设置 white-space 强制不换行。3. text-overflow: ellipsis 超出显示省略号

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>white-space</title>

<style type="text/css">

	.con {width: 500px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}

</style>

</head>

<body>

<p class="con">

	简单之美是透着一种禅意，如天上轻盈的白云，随缘自在；如花中纯白，清新淡雅；如冬雪初落，纯洁通透；如画中留白，给人以想象。简单，纯粹而通透，天然而不加雕琢。

</p>

</body>

</html>

3. 换行内容，换行显示

　　曾遇到过这样一个问题：有一个textarea标签和pre标签，第一个输入值为第二个显示内容

　　当输入过长时，会出现如下问题

　　又查看 white-space的属性，有一个pre-wrap和pre-line属性，就正常了

总结

　　今天总结了 white-space一些常用的情况，但并非全部，希望大家有新的案例，可以告知，谢谢！

　　另外，昨天看了锤子的相声，还是一样的感慨，还是佩服老罗，希望坚果pro 可以大卖

巴特西

white-space 标签使用

white-space MSD定义为：是用来设置如何处理元素中的空白

1.横向滑动

2.超出显示省略号

3. 换行内容，换行显示

总结

最新文章

热门文章

巴特西

white-space 标签 使用

white-space MSD定义为： 是用来设置如何处理元素中的空白

1.横向滑动

2.超出显示省略号

3. 换行内容，换行显示

总结

最新文章

热门文章

white-space 标签使用

white-space MSD定义为：是用来设置如何处理元素中的空白

1.横向滑动　