怎样让css控制文字禁止换行？

html-css012

怎样让css控制文字禁止换行？,第1张

\x0d\x0adiv{width:300pxborder:1px solid redmargin:10pxoverflow:hidden}\x0d\x0a.nowrap{white-space:nowrap}\x0d\x0a\x0d\x0a这是一段很长的文字，中间没有空格，也没有换行，它不会自动换行直到被截取掉\x0d\x0a这是一段很长的文字，中间没有空格，也没有换行，但它会自动换行\x0d\x0a\x0d\x0a上面两个div里超宽的文字，第一个里面的被禁止换行，然后超宽的被截取了；第二个不做设置，于是自动换行了。

最好是用块级元素，父级必须得有个宽度，如果不设置，列如移动端会出现横向滚动条

举例：

<div class='box'>

    <h1>标题信息</h1>

    <p>内容描述</p>

</div>

<style>

    .box{width:100%}

    .box h1{overflow:hiddentext-overflow:ellipsiswhite-space:nowrap}

</style>

white-space:nowrap    //代表文字不自动换行

overflow:hidden          //代表溢出隐藏

text-overflow:ellipsis   //代表溢出省略号

很好用的，一般只设置溢出隐藏会出现截取一般的字，用这个属性就不会了，溢出会出现...