简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

固定宽度文字换行_html/css_WEB-ITnose

WBOY
Release： 2016-06-21 08:59:14
Original
1079 people have browsed it

如题：在固定宽度的块级元素中，里面的内容最后一词组在宽度不够的情况下没有换行，如何让它换到下一行？

首先给出问题，截图如下：

Html

      固定宽度文字换行 
 
 测试 测试 测测试试 测试 测试 测测试试 测试
Copy after login

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;}
Copy after login

我们可以看出第一行和第二行由于宽度不够导致词组断开了，解决这个问题有两种方法。

方法一： 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(); }}
Copy after login

方法二： 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; }}
Copy after login

测试浏览器：chrome/firefox/ie6-11

Related labels：
固定宽度文字换行
source：php.cn
Previous article：纯CSS3制作九款可爱复古相机_html/css_WEB-ITnose Next article：移动端适配方案(上)_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Why can't flex items shrink below content size? I have 4 flexbox columns and everything works fine, but when I add some text to the column...
From 2023-10-15 22:06:39
0
2
286
Why doesn't VS Code limit each line to a maximum of 80 characters when saving? I installed the Prettier extension and set the max line width to 80. I also set it up to f...
From 2023-09-16 23:12:08
0
1
216
How to float only the second div to the right in a container and wrap the first div if it is too long I have rows containing text and data. The text box must be aligned to the left and text-al...
From 2023-09-15 12:28:31
0
1
331
Re-title: fixed div columns and remaining width I'm trying to create a 5 column layout where all columns are the full height of the browse...
From 2023-09-14 17:17:47
0
1
299
Use shrink wrap flex boxes to wrap flex items so they can be centered I have a flexbox with packed content. How to shrink a flexbox to its content? The fundamen...
From 2023-09-13 15:26:47
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！