Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > css text automatic line wrapping_html/css_WEB-ITnose

css text automatic line wrapping_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:52:16

Original

871 people have browsed it

<html><head><style>article{   width:600px;   height:200px;   display:-moz-box;   display:-webkit-box;   display:box;}.sectionOne{   background:orange;   -moz-box-flex:3;   -webkit-box-flex:3;   box-flex:3;}.sectionTwo{   background:purple;   -moz-box-flex:2;   -webkit-box-flex:2;   box-flex:2;}.sectionThree{   -moz-box-flex:1;   -webkit-box-flex:1;   box-flex:1;   background:green;}</style></head><article>   <section class="sectionOne">010000000000000000000001111111111111111</section>   <section class="sectionTwo">02</section>   <section class="sectionThree">03</section></article><html>

Copy after login

How to automatically wrap the text in sectionOne? Neither word-break: break-all; nor word-wrap: break-word; work

Reply to discussion (solution)

Define width
.sectionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
width :80px;
word-break:break-all;
}

Related labels：

css文本自动换行

source：php.cn

Previous article：How can I create a hyperlink in HTML to download an apk file? _html/css_WEB-ITnose Next article：Get the tag attribute of iframe_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