Question

所以，我有一个div和内部h1标题正在按预期工作。但是，当我调整浏览器的大小时，以及最后一句话“＃34; EVERYTHING＆＃34;无法在一行显示我得到一个奇怪的水平滚动，这个词继续。我希望它像其他两个单词一样显示。实际上，它应该在某些方面打破。我知道我可以让文字更小，问题解决但我没有那个选择。

以下是代码和小提琴：http://jsfiddle.net/fYhZ3/5/

注意：调整结果窗口的大小

<style>
.jumbotron {
  width: 100%;
  height: 650px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -9999;
  position: relative;
}
.jumbotron .headline {
  padding-top: 140px;
}
</style>
<div class="container">
            <div class="row">
                <div class="col-lg-6 col-lg-offset-3">
                    <div class="headline">
                        <h1>Run over </br>everything</h1>
                    </div>
                </div>
            </div>
        </div>

Answer 1

it should break on some point，您可以使用word-wrap属性：

允许长词能够破解并换行到下一行

试试这个：

h1 {
    word-wrap:break-word;
}

<强> JSFiddle Demo

Answer 2

听起来你需要修补自动换行或＆＃39;自动换行：break-word;＆＃39;

标题（<h1>）在小屏幕上获得奇怪的水平滚动</h1>

2 个答案: