当站点折叠时，文本将超出块的框架。在 DevTools 中打开移动视图时也会发生同样的情况。
对于开发，我使用了 Bootstrap 4。
文本需要在块框架中换行，而不是离开它。溢出包装不会改变任何东西。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap.css">
<title>Визитная карточка</title>
</head>
<body class="setting-body">
<div class="head">
<h1>Домашнее задание</h1>
</div>
<div class="copy-jumbotron jumbotron ">
<div class="row parent">
<div class="col-md-4 col-lg-4 col-sm-4 setting-div-for-image">
<div>
<img class="setting-image" src="Resources/Avatar.jpg" />
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-4 setting-information">
<h2>Королев Максим Евгеньевич</h2>
<p>Студент с многопрофильного колледжа ТИУ, желающий научиться программировать</p>
<p>Ссылки на социальные <wbr /> сети:</p>
<div>
<div class="links">
<div class="links">
<a class=" links-iteems text-links" target="_blank" href="https://github.com/MaxZmoZg">
<img class="img-links" src="Resources/Git-Icon-Black.png" />
<p class="paragraph">GitHub</p>
</a>
<a class="links-iteems text-links" target="_blank" href="https://vk.com/max_koroliov">
<img class="img-links" src="Resources/Vklogo.png" />
<p class="paragraph">Вконтакте</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
*{box-sizing:border-box;}
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.parent {
display: flex;
width: 90%;
flex-direction: row;
}
.setting-image{
width:150px;
height:150px;
border-radius:90px;
align-content:center;
}
.setting-div-for-image {
display: flex;
align-items: center;
justify-content: center;
}
.setting-information{
width:100% !important;
overflow-wrap: break-word;
}
.links {
display: flex;
}
.links-iteems {
display: flex;
margin-right:20px;
}
.img-links{
width:30px;
height:30px;
flex:auto;
}
.text-links {
text-decoration: none;
color: black;
font-size: 14px;
}
.text-links:hover {
text-decoration: none;
color: #1f8ac8;
font-size: 14px;
}
.paragraph {
display:flex;
margin:0px;
margin-left:10px;
align-items: center;
justify-content: center;
}
.copy-jumbotron {
margin-top: 100px;
background: #fcfafa !important;
-webkit-box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
-moz-box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
border-radius: 20px;
overflow-wrap: break-word;
}
.head{
font-size:25px;
}
.setting-body{
margin-right: 15px;
margin-left: 15px;
}
