控制换行以使线条等宽

2024-04-26

如果 h1 太长而无法容纳在一行中并换行到下一行,我希望这两行的宽度大致相同。我已经到处寻找 CSS 解决方案,但没有成功。

CSS 真的不可能做到这一点吗?这似乎是一个如此简单的事情,在很多情况下都很有用,所以我真的很困惑,这似乎不能用 CSS 来完成。

任何人都可以推荐某种解决方法,或者下一个最好的方法是什么?

需要明确的是,这就是我的意思:

这是一个标题太长,无法放在一行中,因此它换行到下一行文本

我想要的是这样的:

这是一个太长的标题,无法容纳

单行,因此它换行到下一行文本


你可以尝试玩max-width and word-break。请注意,如果您使用word-break: all也许会产生一些连字错误。

两个例子:

.example-1 {
  max-width: 610px; 
  width: 800px;
  word-break: break-word;
}

.example-2 {
  max-width: 610px; 
  width: 800px;
  word-break: break-all;
}
<div class="example-1">
  <h1>Here is a headline that's too long to fit on a single line, so it wraps to the next line of text</h1>
</div>

<div class="example-2">
  <h1>Here is a headline that's too long to fit on a single line, so it wraps to the next line of text</h1>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

控制换行以使线条等宽 的相关文章

  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • Bootstrap:如何将按钮组对齐在中心(垂直)

    在下面的代码中
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • SVG 动画不适用于 Chrome 中的 favicon

    In the SVG 图标已设置 这是旋转内圆的SVG文件的内容 Favicon 动画在 Chrome 中根本不起作用 如何让它在 Chrome 中工作 在 Firefox 中可以正常工作 在 Edge 中则不行 但 Chrome 是最重要
  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 如何在更大的 div 中垂直和水平居中一个 div?

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div
  • 有角度的动态背景图片

    在 html 模板中 我有这种带有动态图像的样式 div style background none width 200px height 150px div 它适用于网络浏览器和 Android 浏览器 但是 使用 style 的动态背景
  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad

随机推荐

  • Service Fabric:删除了参与者,现在升级失败

    我正在尝试混合使用有状态和无状态参与者来升级 Service Fabric 应用程序 我做了一些重构 因此删除了一些我不再需要的演员 现在 当我尝试升级应用程序时 出现以下错误 在删除服务类型之前 必须显式删除服务 经过一番思考后 我thi
  • 确定脚本所在的服务器以及 PHP 中的配置的最佳方法是什么?

    我正在尝试确定让 PHP 脚本确定脚本 站点当前在哪个服务器上运行的最佳方法 目前我有一个switch 使用 SERVER SERVER NAME SERVER SERVER PORT 以确定它位于哪个服务器上 然后 它根据其所在的服务器设
  • 适用于 IIS 的 Windows PowerShell 管理单元在 32 位上失败?

    我正在尝试编写一个 PowerShell 脚本来自动执行 IIS 网站部署 我尝试在 Windows Server 2008 R2 计算机上运行脚本 32 位 C Windows SysWOW64 WindowsPowerShell v1
  • CSS 渐变内容很少:修复了 Chrome 的问题

    我问了一个问题内容很少的 CSS 渐变 https stackoverflow com questions 4873150 css gradients with little content前段时间 我想出了一个可能的解决办法http js
  • 我可以取消选中组框中的一组 RadioBottom 吗?

    组 Box 内的单选底部将被视为一组底部 它们是互斥的 我怎样才能清理他们的检查状态 我有几件收音机底部 其中一件经过检查 我怎样才能 清洁 取消选中 所有收音机底部 setChecked 在组内不起作用 我尝试做以下事情但失败了 我的代码
  • Android 导航组件弹出转换问题

    我有2个行动 Action1
  • Kendo UI - observable、ObservableObject 和 Model 之间的区别

    observable ObservableObject 和 Model 之间有什么区别 谢谢 Model继承自ObservableObject 而ObservableObject又继承自Observable 可观察的 http docs k
  • 将外键添加到 AspNetUser 表

    我创建了一个具有用户身份的 ASP NET Core Razor Pages 应用程序 创建的项目包括添加所有用户表的迁移 例如AspNetUser and AspNetRoles 但是 它不会为这些表创建任何代码模型 现在我已经创建了自己
  • didSelectRowAtIndexPath:没有被调用

    我有一个UITableView作为我的子视图UIScrollVIew 这是我控制的主视图MainViewController 在MainViewController h中 interface MainViewController UIVie
  • Java,声明具有多个接口的变量?

    在Java中 是否可以声明一个类型为多个接口的字段 变量 例如 我需要声明一个Map那也是Serializable 我想确保变量引用可序列化的映射 这Map接口不扩展Serializable 但大多数Map的实现是Serializable
  • 如何禁用浮点单元(FPU)?

    我想在 x86 系统中禁用 FPU MMX SSE 指令 并且我将为设备不可用异常实现一个处理程序 我已经提到过控制寄存器 wiki 页面 http en wikipedia org wiki Control register 看来我必须在
  • Mysql 使用搜索字符串排序

    我有一个 mysql 查询 例如 select from employee where name like ani 我希望我的结果以 ani 开头排序 例如 我的结果应该是 anil anirudha rani 首先以 ani 开头 然后是
  • 服务器传输与服务器传输响应.重定向

    有什么区别Server Transfer and Response Redirect 各自的优点和缺点是什么 什么时候其中一种比另一种更合适 什么时候不合适 Response Redirect只需发送一条消息 HTTP 302 http e
  • Python边缘检测和曲率计算

    我知道边缘检测问题之前已经发布过 在Java中 计算图像中对象的数量 https stackoverflow com questions 2952165 count the number of objects in an image 与语言
  • 如何将 iframe 转换为画布?

    我正在尝试将所有内容作为图像保存到另一个页面中 我已经探索了执行此操作的方法 因此我认为我需要首先将该页面转换为画布 因此 我尝试使用要先将其保存为 iframe 的链接 然后将 iframe 转换为画布 但它不起作用 document r
  • CSS,悬停一个元素,影响另一个元素

    当我将鼠标悬停在 li a 上时 我可以影响普通 CSS 中的另一个元素吗 因为我试图在悬停链接时将一个框作为背景元素滑入 与此网站导航完全相同 只是不是在激活时使用 而是通过悬停来使用 http www zindhai com http
  • Mobile Safari HTML5 视频 - 事件侦听器“结束”不会第二次触发

    我正在尝试添加一个按钮 按下时将播放视频 并且当视频结束时显示图像 问题是 我第二次按下按钮时 视频结束 并且没有任何反应 就好像事件侦听器没有被调用一样 var video document getElementById video fu
  • PHP 删除字符串中最后一次出现某个字符后的字符

    所以测试用例字符串可能是 http example com u ben Or http example com 我试图删除最后一次出现 之后的所有内容 但前提是它不是 http 的一部分 这可能吗 到目前为止我有这个 url substr
  • 如何从数组C++中获取唯一的字符串

    我知道我的问题对某些人来说可能很愚蠢 但我整天用谷歌搜索并尝试制定自己的解决方案 但我失败了 请帮助 我需要从简单的字符串数组中打印所有唯一的字符串 example 输入 嗨 我的 名字 嗨 土豆 文本 名字 嗨 输出 我的 土豆 文本 我
  • 控制换行以使线条等宽

    如果 h1 太长而无法容纳在一行中并换行到下一行 我希望这两行的宽度大致相同 我已经到处寻找 CSS 解决方案 但没有成功 CSS 真的不可能做到这一点吗 这似乎是一个如此简单的事情 在很多情况下都很有用 所以我真的很困惑 这似乎不能用 C