Question

我有一个宽度和高度为250px的div。 div内的h1高度为50px。将新内容添加到我的网站的人可以在框内填写他们想要的内容。

当h1的文字太长时，文字会转到第2行（见图片和右边的方框）。

我的问题是如何强制h1像图片左侧框一样留在盒子里。

Answer 1

我认为你要找的是CSS属性white-space: nowrap;

Answer 2

由于h只有parent，因此您无法将width:250px;留在一行中。因此，如果您将width:100%分配给子项，则只需width:250px;。如果您需要，请尝试使用white-space:nowrap属性

Check here

Answer 3

如果您希望文本适合该行而不必滚动或扩展宽度，则唯一的选择是减少H1上的font-size。

要自动执行此操作，您可以使用像FITTEXT这样的JS插件：http://fittextjs.com/

Answer 4

您可以使用white-space: nowrap来阻止文字换行。（可选）使用overflow和text-overflow来控制行为。

＆＃13;

h1 {
  width: 100px;
  background: salmon;
}
.nowrap {
  white-space: nowrap;
}
.overflow {
  white-space: nowrap;
  overflow: hidden;
}
.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

<h1 class="nowrap">Using white-space: nowrap</h1>
<h1 class="overflow">Using overflow: hidden</h1>
<h1 class="text-overflow">Using text-overflow: ellipsis</h1>

＆＃13;

Answer 5

这是使用javascript的工作。我在这里做的是获取使用脚本的高度，从中我们获得内容行数。根据该值，我们正在调整字体大小。

此处应用的基本字体为20px，行高为50px。如果我们得到的高度是100，那么将有2行文本，我将字体大小减小到20/2，并且使用此值，文本可以容纳在一行中。

如果您觉得它有用，您可以进行微调。干杯！

＆＃13;

$(document).ready(function () {
                var actualHeight = $("h1 span").height();
                var fontSize = 20;
                var fontRatio;
                if(actualHeight > 50){
                    fontRatio = actualHeight/50;
                    fontSize = 20/fontRatio;
                    $("h1 span").css('font-size', fontSize);
                }
            });

＆＃13;

h1{
                width: 300px;
                height: 50px;
                line-height: 50px;
                color: #000;
                background: #999;
                font-size: 20px;
                position: relative;
            }
            h1 span{
                position: absolute;
                top: 0;
                left: 0;
                width: auto;
            }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
            <span>
                orem ipsum dolor sit amet, orem ipsum dolor sit amet, consectetur adipiscing elitorem ipsum dolor sit amet, consectetur adipiscing elit
            </span>
        </h1>

＆＃13;

Answer 6

元素（空白：nowrap；溢出：隐藏；）

迫使h1保持在1行

6 个答案: