CSS填充不能正常工作

Question

＆＃13;

＆＃13;

div {
  position: fixed;
  width: 100%;
  height: 88%;
  padding: 15%;
  text-align: justify;
  font-size: 10px;
}

＆＃13;

<div>FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT</div>

＆＃13;

＆＃13;

＆＃13;

有些人可以向我解释为什么这个文字＆＃34;离开＆＃34;我的视力？我该怎么修呢？ TY

Answer 1

您可以将宽度设置为100％，还可以在之上添加额外的填充。

尝试没有宽度：

＆＃13;

＆＃13;

div {
  position: fixed;
  /*width: 100%;*/
  height: 88%;
  padding: 15%;
  text-align: justify;
  font-size: 10px;
}

＆＃13;

<div>FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT</div>

＆＃13;

＆＃13;

＆＃13;

您也可以按照here的说明尝试box-sizing: border-box;，这样可以更轻松地使用。

使用框大小调整的示例：

＆＃13;

＆＃13;

div {
  position: fixed;
  width: 100%;
  height: 88%;
  padding: 15%;
  text-align: justify;
  font-size: 10px;

  /* ADD THIS ↓ */
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

＆＃13;

<div>FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT</div>

＆＃13;

＆＃13;

＆＃13;

通常，使用

之类的东西更实用

* {
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}

......然后就不用担心了。 Border-Box比默认的＆＃34; Content-Box＆＃34;

要好得多