CSS 相当于 Photoshop 的 Justify-All

2023-11-25

我想采用 h2 元素并将其文本跨越其 div 的宽度。

text-align:justify;

仅当文本的宽度大于其容器的宽度时才展开文本...有点像 Photoshop 的 justify-left


CSS:

h2 {text-align: justify;}
h2 span {width: 100%; display: inline-block;}

HTML:

<h2>This is a h2 heading<span></span></h2>

请注意,这会添加一条不可见的额外线条,导致高度过高。您可能想要弥补这一点:

h2 {text-align: justify; height: 1.15em;}

对于非常简洁的标记,仅适用于 IE7 或更低版本以外的浏览器,您可以使用::after选择器:

h2::after {
    width: 100%;
    display: inline-block;
    content: ".";
    visibility: hidden;
}

See 所有三种解决方案的演示小提琴.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 相当于 Photoshop 的 Justify-All 的相关文章

  • 让 div 填充空间

    我想在内容 div 的一侧放置两列 我遇到的问题是我希望柱子由 3 个部分组成 顶部和底部应该有固定的高度 但中间的高度会根据内容的高度进行调整 查看一列示例
  • bootstrap navbar-static-top 菜单分成两行

    我遇到了引导导航栏的问题 我使用 navbar static top 制作了菜单 起初一切都很好 当菜单被展开并添加了一些项目时 现在随着折叠之前的宽度 它扩展到两行 看起来很糟糕 在 CSS bootstrap 中进行了更深入的挖掘 但没
  • Phonegap Cordova Statusbar 插件创建双栏

    我正在开发一个使用phonegap 的应用程序 通过 CLI 构建 而不是 PhoneGap 构建 我的 cordova plugin statusbar 插件有问题 打开时它将增加额外的条高度 这是它的样子 双高菜单栏 我通过两种方式实现
  • 使用 Objective-C 获取 Photoshop 的动作列表

    我正在使用 C 和 Obj C 编写一个与 Photoshop 交互的 OSX 应用程序 我一直在使用NSAppleScript使用动态构建的 AppleScript 来驱动 Photoshop 是的 这有点可怕 我希望能够以不同的方式驱动
  • JavaScript 相当于 jQuery 的 keyup() 和 keydown()

    我在 stackoverflow 上看到过这个链接 document ready 相当于没有 jQuery https stackoverflow com questions 799981 document ready equivalent
  • window.alert() 之后无法编辑输入文本字段

    我有这个 Electron 应用程序 使用 NodeJS Bootstrap AngularJS 其中包含一些可以编辑的文本输入字段 我有一个触发 window alert 的按钮 触发后 文本输入字段将不再可编辑 单击应用程序的其他元素不
  • 有没有办法创建与元素不同的盒子阴影形状?

    当我将鼠标悬停在复选框输入上时 我尝试在复选框输入上创建圆形框阴影 但它采用元素的形状 如何将框阴影的形状更改为圆形
  • 为什么在 CSS3 中启用硬件加速会降低性能?

    我在 css3 实验中将 10 000 个小 div 元素从浏览器视口的顶部移动到底部 对于此测试 我使用两种不同的方法 使用 GPU 加速translate3D x y z or translateZ 0 无需 GPU 加速 只需调整to
  • 修复了 div 背景重叠浏览器滚动条的问题

    我以前从未见过的非常奇怪的行为 我有一个固定位置的 div 它有一个透明的 png 背景图像 z index 设置为 1 以便内容可以使用滚动条在固定图像上滚动 我将其放置在底部和右侧 0px 处 但图像与滚动条重叠 无论如何 在 FF 和
  • 如何在一个元素上实现多个 CSS 过渡?

    这是一个非常简单的问题 但我找不到关于 CSS 转换属性的很好的文档 这是 CSS 片段 nav a text transform uppercase text decoration none color d3d3d3 line heigh
  • Web 动画 API - 不同的动画持续时间?

    我正在尝试 Web Animations API 该 API 目前仅适用于 Webkit 浏览器 可以想象 文档有点稀疏 这是我在上面找到的一篇博客文章 http updates html5rocks com 2014 05 Web Ani
  • ckeditor 数据未通过 jQuery 验证进行验证

    我知道有很多关于此的问题 但我无法让它在我的一生中发挥作用 我尝试了几种解决方案 包括this http devlog waltercruz com usando ckeditor e jquery validate juntos 第二个答
  • DOM更改后刷新浏览器悬停效果

    我有一个 css 已更改的元素 hover 我还有一些 javascript 可以改变元素的高度 但是如果 javascript 在 hoverstate 处于活动状态 即使高度变化将元素从鼠标下方移出 状态仍保持不变 另外 由于 java
  • 具有列顺序的响应式多列列表

    我正在尝试创建一个有序的多列列表 但正在努力解决 CSS 网格布局规则 期望的结果应该是响应式的 在小屏幕上有 2 个网格列 在较大的屏幕上最多有 4 个网格列 同时保持列顺序 而不是像这样排序 1 2 3 4 5 6 7 8 9 10 1
  • React Native Tab 视图的高度始终等于最高选项卡的高度

    介绍 我有一个 FlatList 它在页脚中呈现一个选项卡视图 此选项卡视图允许用户在一个 FlatList 或另一个 FlatList 之间切换 所以 最后这些是同级 FlatList Problem 第一个 FlatList A 的高度
  • Jquery toggle() 函数无法与hoverwords() 滑动字母扩展一起使用

    我有 2 个 div 每 3 秒切换一次 现在 对于 div 中的文本 我使用一个名为 滑动字母 的扩展 正如您在此处提供的演示中看到的那样 http tympanus net Development SlidingLetters http
  • 为什么边框会增加元素的宽度?

    我有一个div如下 其指定宽度为 300px 边框宽度为 2px 为什么2px边框会导致宽度div是304px 如果我希望它有边框但宽度仍为 300 像素怎么办 test width 300px height auto border 2px
  • 有两个切边的矩形

    我不确定这个形状的具体名称是什么 但我可以将其称为 半平行四边形 吗 我想纯粹使用这个形状CSS CSS3 有什么帮助吗 或教程 您可以使用伪元素来完成此操作 如下所示 做法是从盒子的左下角和右上角剪出一个三角形 只要主体背景是纯色 此方法
  • 删除已从另一个下拉菜单中选择的下拉值

    我在网上搜索了一段时间 但仍然找不到答案 我的网站上有三个下拉菜单 我使用它们来接受用户首选项 以便用户可以控制结果的输出 所以我想知道如果在其中一个下拉列表中选择了该值 是否可以从其他两个下拉列表中取出该值 例如 如果用户在第一个电影中选
  • Shiny 中的模态对话框:可以调整宽度但不能调整高度

    在我的 Shiny 应用程序中 我有几个来自闪亮BS 包的模式窗口 我可以像这样调整这些模式窗口的宽度 tags head tags style HTML modal lg width 1200px abs 1 background col

随机推荐

  • 如何获取安卓锁屏壁纸?

    我使用下面的代码来检索 Android 8 1 手机上的 Android 锁屏壁纸 WallpaperManager manager WallpaperManager getInstance getActivity ParcelFileDe
  • OnPageChangeListener alpha 交叉淡入淡出

    关于 Android 中的交叉淡入淡出有很多问题 但它们都包含动画 我的问题是关于使用 ViewPager 的 OnPageChangeListener 进行交叉淡入淡出 我有一个 ViewPager 它可以有无限数量的视图 但实际上使用大
  • 我的云运行服务如何调用其他云运行服务?

    我有一个服务正在监听 https myapp a run app dosomething 但我想利用 Cloud Run 的可扩展性功能 因此在 dosomething 的控制器中 我向 https myapp a run app smal
  • 获取给定 System.Type 的结构的大小

    给定一个结构体MyStruct 我可以使用以下方法获取该结构实例的大小sizeof MyStruct 在不安全的代码中 但是 我想获取给定结构的大小Type结构体的对象 即sizeof typeof MyStruct 有Marshal Si
  • MYSQL - 无法连接到“localhost”上的 MYSQL 服务器 (10061)

    我已经在我的电脑上安装了 wamp 服务器 它没有互联网或内联网连接 Windows XP 操作系统 但是当我访问MYSQL时会弹出这个错误 你能告诉我如何解决这个错误吗 非常感谢 无法连接到 localhost 上的 MYSQL 服务器
  • 构建应用程序时 Xcode 错误:第 7 行:/resources-to-copy-Project.txt:权限被拒绝

    当我尝试在 Xcode 中构建 cordova 应用程序时 出现以下错误 Users User PhpstormProjects project project app platforms ios Pods Target Support F
  • 需要归档CLLocation数据

    我有一个数组CLLocation我想要存档的数据 应该NSUserDefaults系统可以用吗 否则 如何最好地归档CLLocation data 要正确存储 CLLocation 而不会丢失信息 请使用 NSKeyedArchiver 如
  • 如何从同一模块中的类名字符串获取类对象?

    我有课 class Foo def some method pass 还有另一个班级在同一个模块中 class Bar def some other method class name Foo Can I access the class
  • 未解决的外部符号错误仅发生在 64 位模式中,而不是在 32 位构建中

    我有一个 VC 代码 使用 VS2008 构建 它使用了一些静态库 在编译时静态链接的 lib 文件 为了便于理解 我们将我的 EXE 代码称为 AAA EXE 并将 lib 文件称为 A lib b lib 等 AAA EXE代码和静态库
  • php 发送带有附件的电子邮件

    我似乎找不到我编写的这个应该发送带有附件的电子邮件的 php 函数的问题 我已经为此挣扎了很长一段时间 function myMail to subject mail msg filename contentType random hash
  • 由于用空格扩展变量而导致的 Grep 错误

    我有一个名为 physics 1b sh 在 bash 中 如果我尝试 x physics 1b grep string x sh grep 抱怨 grep physics 1b No such file or directory 然而 当
  • 使用 Ruby on Rails 安排发送电子邮件任务的最佳方式是什么?

    我想安排一项日常任务 每天早上 7 点 我希望发送一封电子邮件 无需人工干预 我正在研究 RoR 框架 我想知道最好的方法是什么 我听说过 BackgrounDRB OpenWFEru 调度程序或基于 Cron 的东西 但我是新手 不明白哪
  • Oracle SQL 在包含数据时将列类型从 number 更改为 varchar2

    我在 Oracle 11g 中有一个表 包含数据 我需要使用 Oracle SQLPlus 执行以下操作 目标 更改列的类型TEST1在表中UDA1 from number to varchar2 建议的方法 备份表 将列设置为空 改变数据
  • CKEditor 插入 HTML

    我有数据库中的数据 在我的 js 文件中 我想更改 CKEditor 文本编辑器的值 我的值是原始 html 我希望将此原始值写入空的 CKEditor 文本编辑器 我尝试了这些 但总是出现未定义的函数错误 CKEDITOR instanc
  • java编译中出现未检查或不安全操作错误? [复制]

    这个问题在这里已经有答案了 我正在完成学校的实验作业 并在编译时收到此错误 程序运行良好 有点想修复导致错误的原因 程序代码和完整错误如下 一如既往的感谢 错误 注意 F Java Lab 8 Lab8 java 使用未经检查或不安全的操作
  • Android 中 Activity 的服务回调

    我有一个正在运行的后台服务和一个与该服务交互的客户端 当客户端请求某些操作时 服务会执行该操作并将结果发送回活动 客户端 我知道如何调用活动中的服务方法 并使用回调我们可以实现我想要做的事情 但我无法理解Api demos remotese
  • 为什么Android模拟器的编号是5554

    这可能是一个完全开箱即用的问题 我只是想知道为什么Android模拟器的编号是5554 5556这样的 Android 模拟器使用网络与 Android SDK 工具进行通信 即使此通信仅限于本地主机 这允许安装应用程序 调试等 当您启动模
  • 以编程方式检索 Google Sheets 单元格边框样式

    有可能set the 范围边框样式和颜色 现在的问题是 我们怎样才能get以编程方式设置边框样式 我正在寻找类似的东西 var ss SpreadsheetApp getActiveSpreadsheet var sheet ss getS
  • Node.js 在断开连接事件时不发送套接字

    当有人连接到节点服务器时 我会保留一个包含所有套接字的数组 这样我就可以在需要时向每个人广播消息 或者循环用户来计算在线用户的数量等 所有这些工作正常 但是当触发断开连接事件时 我在参数中没有收到套接字 还有另一种方法可以知道哪个套接字刚刚
  • CSS 相当于 Photoshop 的 Justify-All

    我想采用 h2 元素并将其文本跨越其 div 的宽度 text align justify 仅当文本的宽度大于其容器的宽度时才展开文本 有点像 Photoshop 的 justify left CSS h2 text align justi