为什么文字不换行了
来源：2-7 编程练习
慕数据5338647
2020-04-14 21:53:22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding:0;
}
.con{
width:900px;
text-align:center;
overflow:hidden;
height:900px;
background:skyblue;
}
.box1,.box2{
float:left;
width:400px;
margin-left:33px;
}
img{
width:400px;
height:250px;
}
.text{
height:300px;
width:400px;
}
p{
font-size:20px;
margin:10px 0;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class='con'>
<p>ENJOY THE LIFE</p>
<div class='box1'>
<img src='http://climg.mukewang.com/58f829090001a4b504260240.jpg'/>
<div class='text'>gshauihguiahuighauighuiahgiauihgbiuhguihbiahgbuihauighuirhuihaeuighuiarguhai</div>
</div>
<div class='box2'>
<img src='http://climg.mukewang.com/58f8290f0001558804260240.jpg'/>
<div>fabguiIUGHUIwhguihwHGIUWhgiuhwuighiuwhguihwIU</div>
</div>
</div>
</body>
</html>
2回答
-
.text样式代码加一行word-break: break-all; 这个就行了
.text{
height:300px;
width:400px;
word-break: break-all;
}
word-break:normal | break-all | keep-all
1、normal为默认值，如果设置为默认值时中文则到边界处的汉字换行，如果是英文整个单词换行，如果出现某个单词长度过长，则会撑破容器，如果边框为固定属性，则后面部分将无法显示；
2、break-all：可以强行截断英文单词，达到词内换行效果。
3、keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行，英文单词也整个换行，如果出现某个英文字符长度超过边界，则后面的部分将撑破容器，如果边框为固定属性，则后面部分无法显示著作权归作者所有。
0 -
好帮手慕慕子
2020-04-15
同学你好，与输入的内容有关系，英文是以空格为分隔识别一个单词的。而同一个单词是不会分隔的。代码中是一串字母，中间没有分隔，计算机容易把它识别为一个单词，就不自动换行了，正常的文字是可以换行的。示例：
建议： 同学可以修改一下段落中的文字
另，整体没有居中显示，建议：给外层盒子添加margin:0 auto;属性实现整体居中效果。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题