有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候，为了页面的美观，这里需要将文字在div中一行显示，并且将过多的文字进行隐藏，以点号进行代替。当鼠标放上面的时候会以title的形式显示所有的内容。 如下图所示为使用样式排版之前的效果： 如下图所示为使用样式排版之后的效果： 明显下面的效果图要比之前友好实用多了。 如下为源码： <br> #test<br> {<br> width: 530px;<br> height: 500px;<br> background-color: Blue;<br> }<br> .content<br> {<br> width: 100px;<br> background-color: Gray;<br> float: left;<br> border: 1px solid red;<br> white-space: nowrap;<br> overflow: hidden;<br> text-overflow: ellipsis;<br> }<br> <br> <br> 测试测试测试测试测试测试测试 测试测试测试测试测试测试测试 测试测试测试测试测试测试测试 测试测试测试测试测试测试测试 ;テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト < 説明 CSSのwhite-space:nowrapは主に、折り返しなしでdivに表示されるテキストを制御します。多すぎるテキストを非表示にし、冗長なテキストをドットでマークします。ここでは、マウスを div 上に置くとすべてのテキストを表示できます。これは主に div の title 属性によって実現されます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
