Heim >Web-Frontend >HTML-Tutorial >固定宽度文字换行_html/css_WEB-ITnose
固定宽度文字换行_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:59:141155Durchsuche
如题：在固定宽度的块级元素中，里面的内容最后一词组在宽度不够的情况下没有换行，如何让它换到下一行？
首先给出问题，截图如下：
Html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"/> <meta name="keywords" content=""/> <meta name="description" content=""/> <title>固定宽度文字换行</title> <link rel="stylesheet" href="css/main.css"/></head><body> <div class="demo"> <a href="#">测试</a> <a href="#">测试</a> <a href="#">测测试试</a> <a href="#">测试</a> <a href="#">测试</a> <a href="#">测测试试</a> <a href="#">测试</a> </div></body></html>
Css
@charset "utf-8";@import "E:/zSass/_config.scss";@import "E:/zSass/_reset.scss";@import "E:/zSass/_common.scss";a { color:#00f;}.demo { overflow:hidden; width:100px; margin-top:50px; @include center-block(); padding:5px; border:1px solid #000; background-color:#aaa; font-family:SimSun; line-height:20px;} 我们可以看出第一行和第二行由于宽度不够导致词组断开了，解决这个问题有两种方法。
方法一： display:inline-block;
Css
@charset "utf-8";@import "E:/zSass/_config.scss";@import "E:/zSass/_reset.scss";@import "E:/zSass/_common.scss";a { color:#00f;}.demo { overflow:hidden; width:100px; margin-top:50px; @include center-block(); padding:5px; border:1px solid #000; background-color:#aaa; font-family:SimSun; line-height:20px; a { @include inline-block(); }} 方法二： float:left;white-space:nowrap;
Css
@charset "utf-8";@import "E:/zSass/_config.scss";@import "E:/zSass/_reset.scss";@import "E:/zSass/_common.scss";a { color:#00f;}.demo { overflow:hidden; width:100px; margin-top:50px; @include center-block(); padding:5px; border:1px solid #000; background-color:#aaa; font-family:SimSun; line-height:20px; a { @include float(); margin-right:5px; white-space:nowrap; }} 测试浏览器：chrome/firefox/ie6-11
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：纯CSS3制作九款可爱复古相机_html/css_WEB-ITnoseNächster Artikel：移动端适配方案(上)_html/css_WEB-ITnose