控制换行以使线条等宽

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 class jumbotron span class glyphicon glyphicon
  • 如何处理触摸设备上的悬停效果

    我有以下代码 div img src http placehold it 350x150 div class link cont a href click here to see more info a div div div width
  • 如何在 Ruby on Rails 中向 select_tag 添加类

    难以为此添加类标签 div class field div 这是我尝试过的 除其他外 div class field div
  • 使用 CSS 创建钟形

    我正在玩CSS中的形状 想要制作一个传统的钟形 想想圣诞钟声 这是我想要的一般形状 尽管我真的不关心顶部和底部的球 这是我到目前为止所拥有的 http jsfiddle net bhlaird NeBtU http jsfiddle net
  • CSS 文本装饰:反向

    我很惊讶 CSS 中没有 text decoration reverse 因为使用 JavaScript 来实现似乎非常尴尬 IE 将元素的前景色和背景色分别设置为父元素的背景色和前景色 我注意到了 JavaScript 技术here ht
  • 如何在 Yesod 中使用 CSS 框架?

    我想将 Blueprint CSS 框架与 Yesod 一起使用 有没有最佳实践 因为 Yesod 使用 CSS 模板 所以在我看来我不能直接使用 css 文件 我必须将它们重命名为 lucius files 吗 如何将 CSS 添加到 d
  • 网格属性不适用于网格容器内的元素

    我正在尝试定位嵌套li ul li ul li 在最顶层创建的 CSS 网格上ul 还没有爱 它不起作用 也许这是不可能的 或者我错过了什么 orgChart ul orgChartLevel1 display grid grid temp
  • JQuery:检查元素是否处于正常流程中

    使用 jQuery 检查元素是否在正常流程中的最优雅的方法是什么 根据CSS3规范 http www w3 org TR css3 box 如果满足以下条件 则框属于流 其 display 的使用值为 block list item tab
  • 如何在 jQuery/javascript 中获取边框宽度

    如何解析边框宽度 style border solid 1px black 在 jQuery javascript 中 elem css border width 不这样做 注意我需要解析 css 的宽度 因为元素可能是display no
  • 锚标记内的 CakePHP Span 标记

    我试图让 CakePHP 输出一个如下所示的链接 a href foo bar class some other classes span class icon new span FooBar a 所以我在我看来使用以下代码
  • 如何调试@font-face问题?

    我有以下 CSS 代码 theMixPlainSemiBold font face font family theMixPlainSemiBold src url css fonts eot src url css fonts eot ie
  • 如何考虑折叠边距来计算元素的高度

    我想计算 div 元素的总 高度 考虑到崩溃了 http www w3 org TR CSS2 box html collapsing margins margins http reference sitepoint com css col
  • 我应该如何使用 jcrop 在客户端裁剪图像并上传?

    我正在开发一个包含文件上传 HTML 控件的组件 在使用文件上传元素选择图像后 该图像将呈现在 HTML5 Canvas 元素上 这是带有示例代码的 JSFiddle https jsfiddle net govi20 spmc7ymp h
  • 在哪里指定图像尺寸以实现最快渲染:在 HTML 中还是在 CSS 中?

    我了解到 明确指定图像尺寸是最佳实践 然后 浏览器可以在仍然下载图像本身的同时布局页面 从而缩短 感知的 页面渲染时间 这是真的 如果是这样 在 HTML 或 CSS 中指定尺寸是否有区别 HTML img src width 200 he
  • IE6 CSS 显示:表格修复?

    我正在开发一个网络应用程序 不幸的是它必须与有史以来最糟糕的软件一起工作 是的 即 ie6 我真的很喜欢CSSdisplay table and display table cell属性 但当然它在 ie 中不起作用 有没有人找到解决这个问
  • 具有自定义尺寸的线性渐变

    我有这样的设计 它已经用 html css 创建 但我需要删除 1 和 5 的额外线条 这是通过添加绝对位置元素来创建灰线来实现的 但容器点的大小是响应式的 我的想法是为每个容器创建一个背景线性渐变 如下所示 for all backgro
  • 使用 jQuery Mobile 和响应式布局/CSS 媒体查询是否多余?

    我正在退房http mediaqueri es http mediaqueri es 今天发现这些网站非常适合移动设备 所以我想知道将 jQuery Mobile 和响应 自适应布局与媒体查询一起使用是否是多余的 因为仅使用媒体查询似乎是一
  • 一个文本区域中的文本应复制到另一个文本区域,并且应使用 JavaScript 单击按钮清除原始文本区域

    我已经完成了以下代码 它显示两个文本区域 其中一个文本区域中的文本通过使用 javascript 单击按钮复制到另一个文本区域
  • Jquery 动画与 CSS 浮动

    我的代码有问题 宽度似乎可以工作 但浮动没有 这里是 这是一个例子 http jsfiddle net v82ck http jsfiddle net v82ck 问题 悬停时菜单上的浮动属性不会改变 我希望每个菜单元素下方的线在悬停该菜单
  • 为什么这个 CSS nowrap 不起作用?

    我试图阻止 bar top container div 包裹它的内容 无论页面有多宽 即两个选择应该始终出现在同一行 但是当页面宽度太小而无法容纳它们时 这不起作用一方面 我该如何解决这个问题 Styles bar top containe

随机推荐

  • 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