Question

我定义了一个视口：

  <meta name="viewport" content="width=device-width, initial-scale=1">

这是html和正文风格：

 html, body {
box-sizing: border-box;
  }

我的问题是，在某些屏幕尺寸中，内容从容器中出来并且不适合屏幕，如下例所示：

example

完整代码在这里： https://jsfiddle.net/roniitzhaik/34678bq2/1/

Answer 1

添加

#branding h1 {
    ...
    overflow-wrap: break-word;
    ...
}

或更改字体大小。

Answer 2

我已经创建了一个示例供您了解它是如何工作的。例如，在一个相对较小的容器内，一个非常长的单词是不合适的。

div {
   width: 100px;
   border: 1px solid red;
}

/* word-wrap: break-word recently changed to overflow-wrap: break-word. */
.overflow {
  /* A long word/string will break in random places.
  A hyphen character will not be inserted. */
  overflow-wrap: break-word;
}

/* A very long word WILL NOT start at the point it should start. 
It will be wrapped to next line and then being broken. */
.word-wrap {
  word-wrap: break-word;
}

/* Avery long word starts at the point it 
should start and it is being broken. */
.word-break {
  word-break: break-all;
}

Normal: 
<div>I am a text that 0123456789012345678901234567890123456789</div><br>

overflow-wrap: break-word; 
<div class="overflow">I am a text 000001234567890123456789</div><br>

word-wrap: break-word;
<div class="word-wrap">I am a text 000001234567890123456789</div><br>

word-break: break-all;
<div class="word-break">I am a text 000001234567890123456789</div><br>

Answer 3

虽然单词可能很长，但应根据屏幕大小适当设置字体大小。没有人想要一次读一封信，即使设置了 break-word 。

将此媒体查询添加到您的CSS。

@media (max-width: 600px) { 

  #branding h1 {
    font-size: 1rem;
  }

}

响应内容问题，内容从容器中流出

3 个答案: