css超出宽度显示省略号的方法：首先新建一个HTML文档；然后在HTML的头部定义标签；最后对h1标签定义一段CSS样式，如“text-overflow:ellipsis;”即可设置超出部分省略号显示。</p></blockquote> <p><img src="https://img.php.cn/upload/article/202105/17/2021051714151456038.jpg" alt="css超出宽度怎么显示省略号" ></p> <p>本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。</p> <p>首先，新建一个HTML文档，用于承载CSS</p> <p><img src="https://img.php.cn/upload/image/716/409/118/1621232164354893.png" title="1621232164354893.png" alt="723f18e6cc44f558ea430936054446b.png"></p> <p>保存以上部分，并在浏览器预览效果，此刻是，并未引入CSS设置的效果</p> <p><img src="https://img.php.cn/upload/image/181/279/264/1621232168480985.png" title="1621232168480985.png" alt="7084ddf0efa4ff5c9804151f9998215.png"></p> <p>在HTML的<head>头部定义<style>标签，引入一段内联的CSS样式</p> <p><img src="https://img.php.cn/upload/image/832/724/414/1621232172560791.png" title="1621232172560791.png" alt="9eb8eeb6ee446b19e9d2eddfa4aeed6.png"></p> <p>对h1标签定义一段CSS，用于设置超出部分省略号显示，示例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">h1{ width: 300px;/*定义块元素的宽度*/ white-space: nowrap;/*内容超宽后禁止换行显示*/ overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/*文字超出部分以省略号显示*/ }</pre><div class="contentsignin">登录后复制</div></div><p><img src="https://img.php.cn/upload/image/628/425/485/1621232178713167.png" title="1621232178713167.png" alt="b62d08ebf240762d64b2c7990cd9328.png"></p> <p>保存以上文件，并在浏览器预览效果</p> <p><img src="https://img.php.cn/upload/image/369/332/126/1621232182605237.png" title="1621232182605237.png" alt="00ea1cfee71f1b93b227354a89572bd.png"></p> <p>推荐：《<a href="//m.sbmmt.com/course/list/12.html" target="_blank">css视频教程</a>》<br></p>
