Html 强制h1保持在1行中

我有一个250像素宽和高的div。div内的h1具有50px的高度。向我的网站添加新内容的人可以在框内填写他们想要的任何内容

当h1处的文本太长时，文本将转到第2行（参见图片和右侧的框）

我的问题是如何强制h1像图片上的左框一样留在框内

---

您不能停留在一行中，因为

parent

只有

宽度：250px。因此，如果将
width:100%
分配给孩子，只需
width:250px仅限。如果需要，请尝试使用
空白：nowrap
属性

我认为您需要的是CSS属性
空白：nowrap
如果您希望文本不必滚动或扩展宽度就可以放入行中，那么您唯一的选择就是减小H1上的
字体大小

要自动执行此操作，您可以使用一个JS插件，如FITTEXT:
防止文本被包装。可以选择使用和来控制行为


h1{
宽度：100px；
背景：鲑鱼；
}
诺拉普先生{
空白：nowrap；
}
.溢出{
空白：nowrap；
溢出：隐藏；
}
.文本溢出{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
使用空白：nowrap
使用溢出：隐藏
使用文本溢出：省略号
这是使用javascript的解决方法。我在这里做的是计算使用脚本的高度，从中我们得到内容的行数。根据该值，我们正在调整字体大小

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

如果你觉得它有帮助，你可以微调。干杯


$（文档）.ready（函数（）{
变量实际高度=$（“h1跨度”）.height（）；
var-fontSize=20；
风险价值比率；
如果（实际高度>50）{
fontRatio=实际高度/50；
fontSize=20/fontRatio；
$（“h1 span”）.css（'font-size'，fontSize）；
}
});
h1{
宽度：300px；
高度：50px；
线高：50px；
颜色：#000；
背景：#999；
字体大小：20px；
位置：相对位置；
}
h1跨度{
位置：绝对位置；
排名：0；
左：0；
宽度：自动；
}

或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说，或者说
元素（空白：nowrap；溢出：hidden；）
示例代码在哪里，您尝试了什么？也许
文本溢出：隐藏
？旁注，“verassing”拼写错误。（它的意思是“将某物化为灰烬”，即火葬）这可以工作，但h1的最后一部分会被切断。这可以工作，但h1的最后一部分会被切断。如果你想至少有一个更好的切割，你可以添加一个
文本溢出：省略号。