文字未正确显示

Question

我的文字效果存在一些问题，因为它无法在页面中正确显示。而不是文本被证明（text-align:justify），就像所有文本被拉伸在一行中一样。在我的本地开发环境中，它正确显示。我花了一些时间试图弄清楚为什么会这样，但仍然没有线索。

$(document).ready(function(){
//Close the responsive menu when clicking on an item
	$('.navbar-collapse li a:not(.dropdown-toggle)').bind('click touchstart', function () {
		$('.navbar-toggle:visible').click();
    });

//Scroll if you click on an item of the navbar
	$('.navbar-collapse li a').click(function(e) {
    	e.stopPropagation();

    var eid = $(this).attr('href');
    var top = $(eid).offset().top;

    $('html, body').animate({ scrollTop: top }, 800);
  });
    $(function() {
  $("form[name='needs-validation']").validate({
    rules: {
      firstname:{ 
        pattern:"[a-zA-Z]+",
        required:true
        },
      lastname:{
        required:"true",
        pattern:"[a-zA-Z]+"
      },
      email: {
        required: true,
        email: true
      },
      zipCode: {
        pattern:"[0-9,]",
        required: true,
        minlength: 5
      }
      },
      state: {
        required: true,
      },
    //Messages errors
    messages: {
        firstname: "Please enter your firstname",
        lastname: "Please enter your lastname",
        zipCode: "Please provide your Zip Code",
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
      },
        email: "Please enter a valid email address"
    },
    submitHandler: function(form) {
      form.submit();
    }
        });
    });
});

* {
	box-sizing: border-box;
}
body, html {
	margin: 0 auto;
	margin-top: 70px;
	padding: 0;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 16px;
}
.navbar-default {
	background-color: white !important;
	box-shadow: 2px 1px rgba(75, 108, 183, 0.82) !important;
}
.navbar-header {
	height: 80px;
	background-color: transparent;
}
.logo {
	height: 60px;
	width: 60px;
	margin-top: -5px;
	border: 1 solid;
	border-color: transparent;
	border-radius: 4px;
}
a {
	text-decoration: none !important;
}
.btn1, .btn2 {
	font-size: 20px;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 600 ;
	padding: 1px;
	margin: 2px;
	margin-top: 10px;
	border: 5px solid transparent;
}
.btn1:hover , .btn2:hover {
	border-bottom: 5px solid;
	border-bottom-color: #4b6cb7;  /* fallback for old browsers */
	border-bottom-color: -webkit-linear-gradient(to right, #182848, #4b6cb7);  /* Chrome 10-25, Safari 5.1-6 */
	border-bottom-color: linear-gradient(to right, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.container-hero-section {
	display: grid;
	color:white;
	grid-template-columns:80px 80px;
	grid-template-rows: 80px 80px;
	width: 100%;
	height: 620px;
	max-width: 1500px 2fr;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;;
}
.text-on-hero {
	display: grid;
	grid-column: 1 / 4;
	grid-row: 3 / 5;
	text-align:center;
	font-size: 40px;
	font-family: 'Alegreya', serif; 
	font-weight: 500; 
}
.main-content { 
	margin-top: 70px;
	width: 100%;
	text-align: justify;
	padding: 30px;
  font-stretch:normal;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 600;
}
h1 {
	font-family: 'Crimson Text', serif;
	font-weight: 600 ;
}
.iframe-container {
	margin-top: 40px;
}
.form-container {
	margin-top: 70px;
	margin-bottom: 20px;
}
.text-center {
	margin-bottom: 40px;
}
.form-labels {
	font-size: 8px;
	color:#434C5F;
	letter-spacing: 0.8px;
	padding: 10px;
	margin-bottom: 20px;
	margin-top: 20px;
}
.form-group {
	text-transform: uppercase;
	padding-top: 1px;
	padding-bottom: 1px;
	margin-right: 1px;
	margin-left: 1px; 
	width: 90%;
}
.form-text {
	text-transform: none;
}
input:hover {
	border:0;
	outline: solid;
	outline-color: azure;
}
.btn-continue {
	font-size: 10px;
	outline:0;
	border: 1px solid;
	border-color: #4b6cb7;
	border-radius: 18px;
	border-color:lightgray; 
	padding:3vmin;
	color: white;
	background-color: #4b6cb7;  /* fallback for old browsers */
	background-color: -webkit-linear-gradient(to right, #182848, #4b6cb7);  /* Chrome 10-25, Safari 5.1-6 */
	background-color: linear-gradient(to right, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ ;
	width: 124px;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 40px;
	margin-bottom: 70px;
}

.btn-continue:hover {
	cursor: pointer;
	box-shadow:0 5px 10px rgba(0, 0, 0, 0.1);
}
.footer-wrapper {
	display: block;
	width: 100%;
	background: #74ebd5;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	height: 150px;
	padding: 10px;
}
.footer-wrapper li {
	float: right;
	list-style: none;
	color:#337ab7;
	cursor: pointer;
	font-size: 12px;
}
.footer-wrapper span {
	float: left;
	margin-right: 12px;
	margin-left: 12px;
	font-size: 24px;
}
@media (max-width: 800px) {
.logo {
		height: 40px;
		width: 40px;
	}
	.text-on-hero {
	grid-column: 1 / 4;
	grid-row: 3 / 4;
	text-align:center;
	font-size: 20px;
	font-weight: 400; 
}
	.container-hero-section {
		height: 420px;
	}
	html,body {
		margin-top: 50px;
	}
	.nav-header-right-collapse {
		background-color: white;
	}
}
@media (max-width: 485px){
	.footer-wrapper li {
		position:relative;
		top:20px;
		right:50px;
		text-align: justify;
		}
	.footer-wrapper span i {
		position: relative;
		right: -90px;
	}
}
@media (min-width: 1300px){
		body,html,h1 {
		margin: 0 auto;
		}
	.container-hero-section {
		margin-top: 120px;
	}
	.navbar-default {
		height: 100px;
		box-shadow: none !important;
	}
	.btn1,.btn2 {
		margin-top: 30px;
		font-size: 30px;
	}
	.logo {
		width: 80px;
		height: 80px;
	}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="wrapper">
	<nav class="navbar navbar-default navbar-fixed-top" id="banner">
  <div class="container navbar-container">
  	<div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="https://cdn.dribbble.com/users/2790/screenshots/1678559/ab_monogram.gif" class="logo">
      </a>
  <button class="navbar-toggle" data-toggle="collapse" data-target=".nav-header-right-collapse">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
    </button>
    </div>
    <div >
  <ul class="nav navbar-nav navbar-right collapse navbar-collapse nav-header-right-collapse" role="navigation">
	<li class="btn1"><a href="#about-us"> About us</a></li>
	<li class="btn2"><a href="#contact-us">Contact</a></li>
  </ul>
		</div>  
  </div>
</nav>
<div class="container-hero-section" style="background-image: url(https://static.tumblr.com/4aa2d12cad2b611779826ebb25800842/9nimsoa/4Hymox5z5/tumblr_static_mistyforestagain.jpg);">	<p class="text-on-hero">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua.</p>
  </div><!--Close hero section-->
  <div id="about-us"></div>
   <section class="main">
    <div class="main-content col-lg-12">
      <h1 class="text-center"> About us </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tellus purus, consequat et interdum sed, maximus vitae justo. Nam finibus enim nec enim condimentum luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ac rutrum libero. Suspendisse sed tincidunt mauris, vel finibus tellus. Vestibulum sit amet velit tortor. Aliquam aliquam urna vel tristique faucibus. Duis mattis condimentum metus quis sodales. Praesent sodales imperdiet nunc et suscipit. Curabitur velit velit, scelerisque vel urna sed, fermentum dignissim sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti.</p>

<p>Nullam massa ipsum, tempor ut sollicitudin at, bibendum nec turpis. Donec vel placerat arcu. Aenean accumsan rhoncus consequat. Nullam vel faucibus tellus. Praesent consequat metus in quam dapibus tincidunt. Cras tellus sapien, suscipit sed fringilla id, iaculis eu ex. Morbi metus dolor, sodales non dictum eget, gravida a enim. Sed porta leo vitae gravida ullamcorper.</p>

<p>Maecenas rutrum erat nisi, at bibendum ex sollicitudin eget. Fusce augue purus, efficitur nec malesuada eget, scelerisque vel metus. Nam sed rutrum arcu. Aliquam vel nunc ante. Nunc convallis libero vel aliquam convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum</p>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9 iframe-container">
  <iframe width="80%" height="240px" src="https://www.youtube.com/embed/QijH4UAqGD8" class="embed-responsive-item"></iframe>
</div>
    </div>
      </section>
    </br>
      <div id="contact-us"></div>
      <section>
	<div class="container form-container col-lg-12">
<form class="contact-form" role="form" name="needs-validation" action="none" data-toggle="validator">
    <h1 class="text-center"> Contact us </h1>
  <div class="form-group center-block">
  <label for="input--email" id="input--email" class="form-labels control-label">Email address</label>
  <input type="email" class="form-control form-control-lg" placeholder="norman-geller@email.com">
  </div>
  <div class="form-group center-block">
<label for="input--name" id="input--name" class= "form-labels control-label">name</label>
<input type="text" name="firstname"  pattern="[a-zA-Z]+" class="form-control form-control-lg" placeholder="your first name here">
  </div>
  <div class="form-group center-block">
<label for="input-last-name" id="input-last-name" class= "form-labels control-label"> last name</label>
<input type="text" name="lastname"  pattern="[a-zA-Z]+" class="form-control form-control-lg" placeholder="your last name goes here">
  </div>
  <div class="form-group center-block">
<label for="input--zip--code" id="input--zip--code" class="form-labels control-label"> Zip code</label>
<input type="number" name="zipCode" class="form-control form-control-lg" placeholder="US zip code">
</div>
<div class="form-group center-block has-feedback">
<label for="select-state" name="state" class="form-labels control-label"> Select state</label>
<select class="form-control">
  <option value=" " >Please select your state</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="DC">District Of Columbia</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="HI">Hawaii</option>
  <option value="ID">Idaho</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
  <option value="MI">Michigan</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="MO">Missouri</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NV">Nevada</option>
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NM">New Mexico</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="ND">North Dakota</option>
  <option value="OH">Ohio</option>
  <option value="OK">Oklahoma</option>
  <option value="OR">Oregon</option>
  <option value="PA">Pennsylvania</option>
  <option value="RI">Rhode Island</option>
  <option value="SC">South Carolina</option>
  <option value="SD">South Dakota</option>
  <option value="TN">Tennessee</option>
  <option value="TX">Texas</option>
  <option value="UT">Utah</option>
  <option value="VT">Vermont</option>
  <option value="VA">Virginia</option>
  <option value="WA">Washington</option>
  <option value="WV">West Virginia</option>
  <option value="WI">Wisconsin</option>
  <option value="WY">Wyoming</option>
</select>
  </div>
<button class="btn-continue center-block" type="submit">Continue <span class="glyphicon glyphicon-send" style="margin-left: 10px;"></span></button>
  </form>
</div>
</section>
<footer>
  <div class="footer-wrapper container-fluid col-lg-12">
    <ul>
      <span><a href="#"><i class="fa fa-rss-square" aria-hidden="true"></i></a></span>
      <span><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></span>
      <span><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
      <li><a href="#"> <strong>Privacy and informacion Processing Policy, etc.</strong></a></li>
      <li><a href="#"> Legal Information |</a></li>
      <li><a href="#"> Terms of use |</a></li>
      </br>
      <li><i class="fa fa-registered" aria-hidden="true"></i>2018 Lorem Impsum Corporation | </li>
      <li>Lorem Impsum Advanced Media, L.I. All rights reserved.</li>
       </ul>
     </div>
  </footer>
</div>

这是codepen链接： https://codepen.io/manAbl/pen/RxBKEz

Answer 1

基于inspect元素，你的行高就是问题：

line-height

设置上面的行高及以上有助于......

Codepen链接： https://codepen.io/anon/pen/zpbGMj

Answer 2

问题在于代码中的body, html { margin: 0 auto; margin-top: 70px; padding: 0; font-family: 'Nunito Sans', sans-serif; font-size: 16px; line-height: 1.5px; } 。

line-height: 1.5px;

如果您有"\New\"，则删除此行会修复文字的状态。我不确定你是否打算这样做，但不管怎样，将它应用到整个文档并不是一个好主意。

Answer 3

它不是文字表现的问题，只是外表。你身上的行高为1.5px，html（CSS行：10）。删除它，它将起作用

Answer 4

您提到的body, html的CSS问题：

line-height: 1.5px;

这似乎是一个错字，它应该是：

line-height: 1.5em;

OR

line-height: 15px;