Question

我试图将我的文本完全显示在“容器” div中，但似乎被截断了？ ..如果只有少量文本，它会起作用，但是如果文本超过一页，它将被切掉。.而且由于背景图片（在stylesheet.css中定义），该页面似乎加载了很长时间。我最好解决这个问题？预先感谢！

* {
  box-sizing: border-box;
}

@font-face {
	font-family: 'zcool';
	src: 	url('fonts/zcool.ttf') format('ttf');
	local: 	url('fonts/zcool.ttf') format('ttf');
	font-weight: normal;
	font-style: normal;
}

html,
body {
  height: 100%;
  width: 100%;
  
}

body {
	padding: 0;
	margin: 0;
	border: 0;
	background-attachment: fixed;
	background-size: 100% auto;
	background-image: url("img/bg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

@media (max-width: 768px) {  /* when screen size is < 768px apply the following styles */
  body {
    padding: 0;
	margin: 0;
	border: 0;
	background-attachment: fixed;
	background-size: 100% auto;
	background-image: url("img/bgm.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
  }
}

ul#horizontal-list {
  list-style: none;
}

ul#horizontal-list li {
  display: inline;
}

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: red;
}

.navbar {
	position: fixed;
	top: 0;
	height: 50px;
	width: 100%;
	background-color: black;
	color: white;
	text-align: center;
	left: 0;
	right: 0;
	z-index: 1;
}

.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}

.header {
	background-image: url(img/j.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 100%;
	width: 100%;
	margin-top: 10%;
    margin-bottom: 10%;
}

@media (max-width: 768px) {  /* when screen size is < 768px apply the following styles */
  .header {
    background-image: url("img/johnswork-mobile.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 100%;
	width: 100%;
	margin-top: 10%;
    margin-bottom: 10%;
  }
}

.body {
	height: 100%;
	width: 90%;
	margin: auto;
	padding: 0;
	border: 0;
	color: black;
	padding-left: 5%;
	padding-right: 5%;
	overflow: hidden;
	
	/*background-color: grey;*/
}


.johnswork {
	background-image: url(img/johnswork.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 20%;
    width: 100%;
    margin-bottom: 5%;
}

.content {
	margin: auto;
	height: 100%;
	width: 90%;
	background-color: white;
	color: black;
	border-right: double;
	border-left: double;
	box-shadow: 0px -21px 28px 7px rgb(162, 27, 27);
	text-align: justify;
	font-size: 20px;
	padding-top: 2%;
	padding-bottom: 10%;
	padding-left: 5%;
	padding-right: 5%;
}

@media (max-width: 768px) {  /* when screen size is < 768px apply the following styles */
  .content {
    margin: auto;
	height: 100%;
	width: 90%;
	background-color: white;
	color: black;
	border-right: double;
	border-left: double;
	box-shadow: 0px -21px 28px 7px rgb(27, 125, 162);
	text-align: justify;
	font-size: 20px;
	padding-top: 2%;
	padding-bottom: 10%;
	padding-left: 5%;
	padding-right: 5%;
  }
}


.social {
	margin: auto;
	display: flex;
	justify-content: center;
}


.me {
	float: left;
	margin-right: 3%;
	height: 100%;
}


.footer {
  height: 50px;
  width: 72%;
  background-color: black;
  color: white;
  vertical-align: middle;
  margin: auto auto 50px;
}

#copyright {
	display: table;
}


#cpy{
    display: table-cell;
    vertical-align: middle;
}

<!DOCTYPE html>

<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
  <!--<link rel="stylesheet" type="text/css" href="stylesheet-m.css" media="handheld" />-->
  <link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
  <meta name="description" content="My Personal Portfolio">
  <title>John's Work</title>
</head>

<body>


	<nav class="navbar">

		<ul>
			<li><a href="index.html">HOME</a></li>
			<li><a href="about.html">ABOUT</a></li>
			<li><a href="contact.html">CONTACT</a></li>
		</ul>

	</nav>


	<header class="header">
	
	<!-- background defined in stylesheet.css-->
		
	</header>

		<section class="body">
			<section class="content">
			
			<section class="johnswork">
			<!-- background defined in stylesheet.css-->
			</section>
			
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna, in suscipit purus.

			Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.

			Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio.

			Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu. Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus sit amet viverra in, varius vel urna.

			Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor, a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
			
			</section>
		</section>

	<footer class="footer" id="copyright" style="text-align:center">
		<div id="cpy">&copy; DA COSTA JOAO (2019)</div>
	</footer>



</body>

</html>

Answer 1

摆脱

html,
body {
  height: 100%;
}

似乎可以解决文本被截断的问题。

Answer 2

我假设您想要一张带有文字的图像。您可以尝试一下！

  .image-container {
  float: left;
  margin: 0px 20px 5px 0px;

<section class="content">
  <div class="image-container">
    <img src="https://images.pexels.com/photos/374811/pexels-photo-374811.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
  </div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla
    eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer
    quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna,
    in suscipit purus. Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada.
    Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero
    consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer
    fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus
    euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio. Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu.
    Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus
    nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus
    sit amet viverra in, varius vel urna. Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor,
    a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor
    justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
  </p>
</section>

Answer 3

至于文本剪切，下面的css似乎在不剪切图像的情况下对其进行了修复。

.body{
    height: auto;
}

关于背景图像，可能是文件大小。我通常使用https://compressor.io/来减小文件大小，同时保持图像质量。

使文本完全显示在div中

3 个答案: