首页 > HTML > 在html如何阻止文本占据超过 1 行?

在html如何阻止文本占据超过 1 行?

上一篇 下一篇

是否有自动换行或任何其他属性阻止文本换行?我有一个高度,并且文本仍然中断。overflow:hidden

需要在 CSS3 之前的所有浏览器中工作。

分割线

网友回答:

div {
  white-space: nowrap;
  overflow: hidden;
}
<div>testing quite a lot of text that just doesn't wrap because it is too long a run-on sentance with so many useless words for you to not read today despite every effort you make to do so including stretching your browser width to the maximum length unless however you utilized your browser's zooming out feature or manually modifying the CSS in which case you are definitely cheating and ruining this fun little game of me typing out as many words as can be fitted into one ridiculously long run-on sentence of the twenty-first century anno domini using my traditional keyboard and two monitors at 1080p while going through every effort to painstakingly ramble on and on but just not exactly repeating myself short of reusing a couple of words in multiple places throughout this HTML even though that would be about a thousand times easier than what I'm currently doing on this day to pointlessly avoid work regardless of its futility given that it'll only create consequences for myself in having to work harder to catch up later of course all of that notwithstanding moderation efforts to tone back my extensive efforts to make this somewhat enjoyable to read while making it as long as possible who may or may not revert this edit in spite of its usefulness since the previous edit only contained four words that could not possibly wrap even without the CSS changes due to their short nature which is invariably going to create more questions than it answers such as can be found in the comments section which is exactly why I created this effort in order to address one of those about the purpose of the overflow attribute which if you have modified you will now see lets you read the entirety of this text through the benefits of horizontal scrolling features but on the other hand if only overflow was used and text-wrap was left out then you will continue to see a vertical scrollbar unless you set a fixed height for this div in which case you certainly should see that vertical overflow is hidden though that would only happen if you did not put this example into fullscreen short of having your viewport set to a small enough height which can actually be further defined to a designated number of lines as opposed to one by using a height set to a multiple of the CSS property defined by line-height which could be a percentage of white-space and that would indeed hide the vertical overflow of this mountain of text which I'm really quite surprised that you managed to linger on here to read through its frivolous nature on the famed site known by programmers as Stack Overflow and for that I congratulate you for potentially wasting your time</div>

注意:这仅适用于块元素。如果您需要对表格单元格执行此操作(例如),则需要在表格单元格内放置一个 div,因为表格单元格显示表格单元格不阻止。

从 CSS3 开始,表格单元格也支持此功能。

分割线

网友回答:

您可以使用 CSS 属性来实现此目的。white-space

white-space: nowrap;

分割线

网友回答:

使用将添加…最后。text-overflow: ellipsis

div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

模板简介:该模板名称为【在html如何阻止文本占据超过 1 行?】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 203次
  • 使用软件 Sublime/Dreamweaver/HBuilder
  • 文件格式 编程语言
  • 文件大小 暂无信息
  • 上传时间 04-07
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 单页式简历模板 自适应 企业网站 微信公众平台 微信模板 响应式 微信图片 微信素材 微信文章
您可能会喜欢的其他模板