Question

在F12中，当我拖动响应页面时，我注意到当我将其调整为移动大小时，标题从body page伸出。您知道为什么会导致文本像这样伸出来吗？

最后，我注意到在将letter-spacing元素放入标题后，调整手机大小时标题标题并没有居中。

我的头不知道这是怎么回事。

这是我的html和CSS

*{
	box-sizing: border-box;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}

/* The header section */

.header {
	padding: 80px;
	text-align: center;
	background: #ccccff;
}

.header h1 {
	font-size: 68px;
	font-family: "Lucida Console", Monaco, monospace;
	letter-spacing: 10px;
}

/* The main content section */

.content {
	padding: 10px;
	background: #e6e6e6;
}

.content h2 {
	text-align: center;
}

.content p {
	margin: 30px;
}

/* Three equal columns */

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* This is the footer section */
footer {
	width: 100%;
	height: 100%;
	padding: 50px;
	text-align: center;
	background: lightgreen;
}

/* Responsive design starts here */

@media only screen and (max-width: 768px) {
	.column {
		width: 100%;
	}
}

<!DOCTYPE html>
<html>
<head>
	<title>Title Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<!-- This is a header -->
	<div class="header">
		
		<h1>Website Title</h1>
		<p>Dolor sed veniam minim eiusmod sint labore elit lilamco dolor in in dolor clipa occaecat do.</p>

	</div>

	<!-- This is the main content -->
	<div class="content">

		<!-- About section -->

		<h2>About</h2>
		<p>
			Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim. Sed ut lilamco veniam est esse tempor in anim excepteur lilamco excepteur deserunt ad. Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in ad velit clipa aliqua id sunt clipa nlila aliqua laboris.
		</p>

		<!-- 3 column responsive layout -->

		<div class="row">

		  <div class="column" style="background-color:#aaa;">
		    <h2>Column 1</h2>
		    <p>
		    	Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
		    </p>
		    <ul>
		    	<li>Skill 1</li>
			    <li>Skill 2</li>
			    <li>Skill 3</li>
			    <li>Skill 4</li>
			    <li>Skill 5</li>
		    </ul>
		    
		  </div>


		  <div class="column" style="background-color:#bbb;">
		    <h2>Column 2</h2>
		    <p>
		    	Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
		    </p>
		    <ul>
		    	<li>Skill 1</li>
			    <li>Skill 2</li>
			    <li>Skill 3</li>
			    <li>Skill 4</li>
			    <li>Skill 5</li>
		    </ul>
		    
		  </div>


		  <div class="column" style="background-color:#ccc;">
		    <h2>Column 3</h2>
		    <p>
		    	Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
		    </p>
		    <ul>
		    	<li>Skill 1</li>
			    <li>Skill 2</li>
			    <li>Skill 3</li>
			    <li>Skill 4</li>
			    <li>Skill 5</li>
		    </ul>
		    
		  </div>

		</div>



	</div>

	<!-- This is the footer -->
	<div class="footer">
		<footer>
			Person Name &copy; 2019
		</footer>
	</div>

</body>
</html>

Answer 1

我认为解决此问题的最佳方法是打破常规。使用word-break: break-word;

缩小屏幕尺寸时

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* The header section */

.header {
  padding: 80px;
  text-align: center;
  background: #ccccff;
}

.header h1 {
  font-size: 68px;
  font-family: "Lucida Console", Monaco, monospace;
  letter-spacing: 10px;
  word-break: break-word;
}

/* The main content section */

.content {
  padding: 10px;
  background: #e6e6e6;
}

.content h2 {
  text-align: center;
}

.content p {
  margin: 30px;
}

/* Three equal columns */

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* This is the footer section */
footer {
  width: 100%;
  height: 100%;
  padding: 50px;
  text-align: center;
  background: lightgreen;
}

/* Responsive design starts here */

@media only screen and (max-width: 768px) {
  .column {
    width: 100%;
  }
}

<body>
  <!-- This is a header -->
  <div class="header">
    <h1>Website Title</h1>
    <p>Dolor sed veniam minim eiusmod sint labore elit lilamco dolor in in dolor clipa occaecat do.</p>
  </div>

  <!-- This is the main content -->
  <div class="content">
    <!-- About section -->

    <h2>About</h2>
    <p>
      Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim. Sed ut lilamco veniam est esse tempor in
      anim excepteur lilamco excepteur deserunt ad. Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in ad
      velit clipa aliqua id sunt clipa nlila aliqua laboris.
    </p>

    <!-- 3 column responsive layout -->

    <div class="row">
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>
          Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa
          laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam
          consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
        </p>
        <ul>
          <li>Skill 1</li>
          <li>Skill 2</li>
          <li>Skill 3</li>
          <li>Skill 4</li>
          <li>Skill 5</li>
        </ul>
      </div>

      <div class="column" style="background-color:#bbb;">
        <h2>Column 2</h2>
        <p>
          Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa
          laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam
          consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
        </p>
        <ul>
          <li>Skill 1</li>
          <li>Skill 2</li>
          <li>Skill 3</li>
          <li>Skill 4</li>
          <li>Skill 5</li>
        </ul>
      </div>

      <div class="column" style="background-color:#ccc;">
        <h2>Column 3</h2>
        <p>
          Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa
          laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam
          consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
        </p>
        <ul>
          <li>Skill 1</li>
          <li>Skill 2</li>
          <li>Skill 3</li>
          <li>Skill 4</li>
          <li>Skill 5</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- This is the footer -->
  <div class="footer">
    <footer>
      Person Name &copy; 2019
    </footer>
  </div>
</body>

我的班级<h1>标头伸出<body>页面

1 个答案: