如何使用纯HTMLCSS使“漂亮”表溢出

概述我在div中有两行单词(基本文本输出,还没有表等),例如 a b c d e f g h i 1 2 3 4 5 6 7 8 9 现在这些列表可能很长,并且格式在小型监视器上很容易破坏.它看起来像这样： a b c d e fg h i1 2 3 4 5 67 8 9 但是我希望这样： a b c d e f1 2 3 4 5 6g h i7 8 9 我怎样才能做到这一点？我想使用 我在div中有两行单词(基本文本输出,还没有表等),例如

a b c d e f g h i 1 2 3 4 5 6 7 8 9

现在这些列表可能很长,并且格式在小型监视器上很容易破坏.它看起来像这样：

a b c d e fg h i1 2 3 4 5 67 8 9

但是我希望这样：

a b c d e f1 2 3 4 5 6g h i7 8 9

我怎样才能做到这一点？我想使用纯HTML功能,没有JavaScript依赖.

解决方法 有两种方法可以解决这个问题：

1)使用表格.将表放在容器div中,并将overflow-x CSS属性设置为auto.当屏幕空间太小时,这将使您的表可左右滚动.

2)包装div的每一行是一个容器(div,span等),并将其white-space CSS属性设置为nowrap.并且在包含div时,再次使用CSS属性overflow-x：auto在屏幕空间太小时使容器滚动.

3)而不是两行文本,在其自己的div中创建每个名称/值对,并将div浮动到左侧.当内容换行时,该对将换行到下一行：

<div >a<br>1</div><div >b<br>2</div><div >c<br>3</div>...<div >ZZZ<br>999</div>.floatMe {  float: left;  /* add wIDth,padding,margin,etc to taste */}

渲染如下：

A B C D E F G H I J  K  L  M1 2 3 4 5 6 7 8 9 10 11 12 13N  O  P  Q  R  S14 15 16 17 18 19

总结

以上是内存溢出为你收集整理的如何使用纯HTML / CSS使“漂亮”表溢出全部内容，希望文章能够帮你解决如何使用纯HTML / CSS使“漂亮”表溢出所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。