文本溢出文本框

时间：2015-12-13 20:20:13

标签： html css text

我需要一些帮助，我的文字溢出了它所在的文本框，我不知道为什么

＆＃13;
＆＃13; 
JsonSerializer<?> findSerializer(SerializationConfig config, JavaType type, BeanDescription beanDesc).
＆＃13; 
body {
    background-color: #F2F2F2;
    
}
.body1 {
    background-color: #FFFFFF;
    margin-left: 10vw;
    width: 79.1vw;
    height: auto;
    max-width: 1000vw;
    margin-top:0px;
    font-size:1.6vw; 
	padding:5px 5px;
  	 word-wrap:normal;
    
}   

p.text {
     width:79.1vw;
	 word-wrap:word-break;

}

.webheadimg {
    margin-left: 10vw;
    width: 80vw;
    max-width:1000vw;
    max-height:150vh;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
    overflow:hidden;

    } 
#menu {
    width: 80vw;
    font-size: 1vw;
    max-font-size:1.6vw;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
	font-color: #FFFFFF;
	 font-size: 1vw;
    max-font-size: 1.6vw;
    text-align: center;
    margin-left: 10vw;
    background-color: #CA2A2A;
        border-radius: 0px;
        max-width: 1000vw;
    
}
#menu ul {
    height: auto;
    padding: 0.8vw 0px;
    margin: 0px;
}
#menu li { 
    display: inline; 
    font-size: 1vw;
    max-font-size: 16vw; 
}
#menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.8vw 0.8vw 0.8vw 0.8vw;
	font-size: 1.5vw;
    max-font-size: 16px;
}
#menu a:hover {
    color: #000000;
    background-color: #FFFFFF;
}
.webheadlogo {
position:absolute;
overflow:hidden;
margin-left: 10vw;
float:left;
height: auto;
width: 5%;
padding: 5px 5px;

}

@media (max-width:1000px) {
body {
    background-color: #F2F2F2;
 
}


    
.webheadimg {
width:96.3vw;
height:auto;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
margin-left:1vw;
overflow:hidden;
    }    
#menu {
    width: 21.4vw;
	height:auto;
    text-align: left;
    margin-left: 1vw;
    background-color: #CA2A2A;
        border-radius: 0px;
    overflow:hidden;
}
#menu ul {
    height: auto;
    padding: 0.5vw 0vw;
    margin: 0px;
}
#menu li { 
    display: block; 
	width:auto;
	height:auto;
	

}
#menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.5vw 0.5vw 0.5vw 0.5vw;
	font-size: 2.5vw;
	display:block;
	width:auto;
	height:auto;
    overflow:hidden;
    font-weight:normal;


}
#menu a:hover {
    color: #000000;
    background-color: #FFFFFF;

}
.webheadlogo {
position:absolute;
overflow:hidden;
margin-left: 1vw;
float:left;
height: auto;
width: 10%;
padding: 5px 5px;

}

.body1 {
position:absolute;
    background-color: #FFFFFF;
    width: 72.9vw;
    height: auto;
float:center;
font-size:2.5vw; 
 margin-left: 23.4vw;
 padding: 5px 5px;

display:block;

}

}
＆＃13;
＆＃13;
＆＃13; 正如您所看到的那样，文本不适合框中，并且也不像网站的其他部分那样响应。 请有人告诉我我需要做什么， 提前谢谢

2 个答案:

答案 0 :(得分：2)

在此处将word-break更改为break-word：

p.text {
     width:79.1vw;
     word-wrap: break-word;
}


body {
    background-color: #F2F2F2;
    
}
.body1 {
    background-color: #FFFFFF;
    margin-left: 10vw;
    width: 79.1vw;
    height: auto;
    max-width: 1000vw;
    margin-top:0px;
    font-size:1.6vw; 
	padding:5px 5px;
  	 word-wrap:normal;
    
}   

p.text {
     width:79.1vw;
	 word-wrap: break-word;

}

.webheadimg {
    margin-left: 10vw;
    width: 80vw;
    max-width:1000vw;
    max-height:150vh;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
    overflow:hidden;

    } 
#menu {
    width: 80vw;
    font-size: 1vw;
    max-font-size:1.6vw;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
	font-color: #FFFFFF;
	 font-size: 1vw;
    max-font-size: 1.6vw;
    text-align: center;
    margin-left: 10vw;
    background-color: #CA2A2A;
        border-radius: 0px;
        max-width: 1000vw;
    
}
#menu ul {
    height: auto;
    padding: 0.8vw 0px;
    margin: 0px;
}
#menu li { 
    display: inline; 
    font-size: 1vw;
    max-font-size: 16vw; 
}
#menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.8vw 0.8vw 0.8vw 0.8vw;
	font-size: 1.5vw;
    max-font-size: 16px;
}
#menu a:hover {
    color: #000000;
    background-color: #FFFFFF;
}
.webheadlogo {
position:absolute;
overflow:hidden;
margin-left: 10vw;
float:left;
height: auto;
width: 5%;
padding: 5px 5px;

}

@media (max-width:1000px) {
body {
    background-color: #F2F2F2;
 
}


    
.webheadimg {
width:96.3vw;
height:auto;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
margin-left:1vw;
overflow:hidden;
    }    
#menu {
    width: 21.4vw;
	height:auto;
    text-align: left;
    margin-left: 1vw;
    background-color: #CA2A2A;
        border-radius: 0px;
    overflow:hidden;
}
#menu ul {
    height: auto;
    padding: 0.5vw 0vw;
    margin: 0px;
}
#menu li { 
    display: block; 
	width:auto;
	height:auto;
	

}
#menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.5vw 0.5vw 0.5vw 0.5vw;
	font-size: 2.5vw;
	display:block;
	width:auto;
	height:auto;
    overflow:hidden;
    font-weight:normal;


}
#menu a:hover {
    color: #000000;
    background-color: #FFFFFF;

}
.webheadlogo {
position:absolute;
overflow:hidden;
margin-left: 1vw;
float:left;
height: auto;
width: 10%;
padding: 5px 5px;

}

.body1 {
position:absolute;
    background-color: #FFFFFF;
    width: 72.9vw;
    height: auto;
float:center;
font-size:2.5vw; 
 margin-left: 23.4vw;
 padding: 5px 5px;

display:block;

}

}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Hull Daily News</title>
</head>
<body>

<div>
<img class="webheadlogo" src="logo1.png" alt=".logo">
<img class="webheadimg" src="Webhead.jpg" alt=".Webhead" />

</div>
<div class="body1">
<p class="text">
asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</div>
<div id="menu">
<ul>
<li><a href="website.html">Home</a>
<li><a href="breakingnews.html">Breaking News</a></li>
<li><a href="Sport.html">Sport</a></li>
<li><a href="Hulltoday.html">Hull Today</a></li>
<li><a href="Property.html">Property</a></li>
<li><a href="Social.html">Social Media</a></li>
<li><a href="Music.html">Music</a></li>
<li><a href="Reviews.html">Reviews</a></li>
<li><a href="Movies.html">Movies</a></li>
<li><a href="Weather.html">Weather</a></li>
</ul>
</div>

</body>
</html>

答案 1 :(得分：2)

在p.text上设置word-wrap: break-word;或word-break: break-all。您可以在this question中了解这两个属性之间的细微差别。

＆＃13;
＆＃13; 
body {
  background-color: #F2F2F2;
}
.body1 {
  background-color: #FFFFFF;
  margin-left: 10vw;
  width: 79.1vw;
  height: auto;
  max-width: 1000vw;
  margin-top: 0px;
  font-size: 1.6vw;
  padding: 5px 5px;
  word-wrap: normal;
}
p.text {
  width: 79.1vw;
  word-wrap: break-word;
}
.webheadimg {
  margin-left: 10vw;
  width: 80vw;
  max-width: 1000vw;
  max-height: 150vh;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: normal;
  overflow: hidden;
}
#menu {
  width: 80vw;
  font-size: 1vw;
  max-font-size: 1.6vw;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: normal;
  font-color: #FFFFFF;
  font-size: 1vw;
  max-font-size: 1.6vw;
  text-align: center;
  margin-left: 10vw;
  background-color: #CA2A2A;
  border-radius: 0px;
  max-width: 1000vw;
}
#menu ul {
  height: auto;
  padding: 0.8vw 0px;
  margin: 0px;
}
#menu li {
  display: inline;
  font-size: 1vw;
  max-font-size: 16vw;
}
#menu a {
  text-decoration: none;
  color: #FFFFFF;
  padding: 0.8vw 0.8vw 0.8vw 0.8vw;
  font-size: 1.5vw;
  max-font-size: 16px;
}
#menu a:hover {
  color: #000000;
  background-color: #FFFFFF;
}
.webheadlogo {
  position: absolute;
  overflow: hidden;
  margin-left: 10vw;
  float: left;
  height: auto;
  width: 5%;
  padding: 5px 5px;
}
@media (max-width: 1000px) {
  body {
    background-color: #F2F2F2;
  }
  .webheadimg {
    width: 96.3vw;
    height: auto;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
    margin-left: 1vw;
    overflow: hidden;
  }
  #menu {
    width: 21.4vw;
    height: auto;
    text-align: left;
    margin-left: 1vw;
    background-color: #CA2A2A;
    border-radius: 0px;
    overflow: hidden;
  }
  #menu ul {
    height: auto;
    padding: 0.5vw 0vw;
    margin: 0px;
  }
  #menu li {
    display: block;
    width: auto;
    height: auto;
  }
  #menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.5vw 0.5vw 0.5vw 0.5vw;
    font-size: 2.5vw;
    display: block;
    width: auto;
    height: auto;
    overflow: hidden;
    font-weight: normal;
  }
  #menu a:hover {
    color: #000000;
    background-color: #FFFFFF;
  }
  .webheadlogo {
    position: absolute;
    overflow: hidden;
    margin-left: 1vw;
    float: left;
    height: auto;
    width: 10%;
    padding: 5px 5px;
  }
  .body1 {
    position: absolute;
    background-color: #FFFFFF;
    width: 72.9vw;
    height: auto;
    float: center;
    font-size: 2.5vw;
    margin-left: 23.4vw;
    padding: 5px 5px;
    display: block;
  }
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>Hull Daily News</title>
</head>

<body>

  <div>
    <img class="webheadlogo" src="logo1.png" alt=".logo">
    <img class="webheadimg" src="Webhead.jpg" alt=".Webhead" />

  </div>
  <div class="body1">
    <p class="text">
      asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </p>
  </div>
  <div id="menu">
    <ul>
      <li><a href="website.html">Home</a>
        <li><a href="breakingnews.html">Breaking News</a>
        </li>
        <li><a href="Sport.html">Sport</a>
        </li>
        <li><a href="Hulltoday.html">Hull Today</a>
        </li>
        <li><a href="Property.html">Property</a>
        </li>
        <li><a href="Social.html">Social Media</a>
        </li>
        <li><a href="Music.html">Music</a>
        </li>
        <li><a href="Reviews.html">Reviews</a>
        </li>
        <li><a href="Movies.html">Movies</a>
        </li>
        <li><a href="Weather.html">Weather</a>
        </li>
    </ul>
  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题