如何优化连字符

2024-02-21

我正在努力解决浏览器处理逐行对齐文本连字的不同方式。我的文本有以下 css 设置:

text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

我的语言设置是en。处理不一致的一个词是“表达”:

Chrome: no hyphenation
Firefox: express-ing [correct!]
IE11: express-ing [correct!]
Safari: express-ing [correct!]

令人困惑的是,Safari 能够用连字符连接德语单词“Gesamtkunstwerk”:

Chrome: no hyphenation
Firefox: no hyphenation
IE11: no hyphenation
Safari: Gesamtkunst-werk [correct!]

我不知道 Safari 是如何感知到这个词是德语并用连字符连接它的。有任何想法吗?

CSS3 规范指出hyphenate-resource选项,但我发现没有可以包含和/或编辑的示例文件。理想情况下,如果主要浏览器支持该选项,我将包含它并希望编辑它的非英语单词以及编辑其默认值。

最好的方法是什么?


我正在努力解决浏览器处理连字符的不同方式 逐行对齐文本。

方法一.CSS
See 这个链接 https://css-tricks.com/almanac/properties/h/hyphenate/仅 CSS 解决方案。

article p{
  text-align: justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

您已经尝试过此操作,并发现无论浏览器版本如何,绝对不支持 Chrome,并且各个浏览器之间的结果缺乏一致性。您可能想知道是否有一种更一致的连字符方式可以在所有主要浏览器上正常工作?

方法2.Javascript
Hyphenator.js http://mnater.github.io/Hyphenator/mergeAndPack.html是一个适用于所有主要浏览器的 Javascript 库解决方案。而且...比目前大多数浏览器提供的语言支持还要多。首先选择您的网站中需要连字符支持的一种(或多种)语言,然后按照步骤自定义您自己的脚本,最后单击“创建!”这将为您创建缩小的 javascript。您将其复制到 hyphenate.js 文件中,最后不要忘记在要连字符的段落上定义类。

<head>
  <script src="hyphenate.js" type="text/javascript"></script>
</head>

<body>
  <article lang="nl" class="hyphen">  // in this case Dutch >> NL
    <p>.......</p>
  </article>
</body>

注意:请注意,我自定义了该类并缩短为连字符而不是默认的连字符

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

如何优化连字符 的相关文章

  • 引用 url() 的值真的有必要吗?

    我应该在样式表中使用以下哪一项 Example 1 background image url image png Example 2 background image url image png Example 3 background i
  • Chrome:网络元素自动移动

    我正在开发一个网络项目 在过去的两周里 我正在进行学期考试 所以我要休息一下 现在 既然他们已经结束了 我又继续我的工作了 但我发现我的一些Web 元素 如按钮 span 在 Chrome 上移动了一些像素 在 IE 和 Mozilla 上
  • jquery UI datepicker仅月份和年份的css定位问题

    我已经实施了这里讨论的解决方案 JQuery 日期时间选择器 只需选择月份和年份 https stackoverflow com questions 4079525 jquery datetime picker need to pick m
  • 将图例标签设置为块

    我已经在以下网址设置了我的问题的演示 http jsfiddle net YHHg7 4 http jsfiddle net YHHg7 4 我正在尝试执行以下操作 legend display block border bottom 1p
  • Android浏览器上的Web应用程序宽度问题

    所以到目前为止我只在 Android 浏览器上遇到过这个问题 基本上我的网站几乎一直运行良好 而且我还没有在 Dolphin Opera 或 Skyfire 上看到这个问题 但偶尔当我从手机主屏幕之一上的书签重新打开 Android 浏览器
  • 如何设置必须输入特定数字的字段?

    我想知道如何创建一个需要输入特定数字或文本的字段 例如 激活码 以及在输入的确认答案的情况下移动到 网页 并且在未确认的情况下移动到 另一页面 的按钮 使用必需的属性
  • 网格布局:创建 CSS,以便元素在调整相邻元素大小时保持位置

    我想在网格布局中构建一个简单的图像库 并且我正在使用类似的东西悬停时缩放 http www javascript fx com navigation imagezoom general help help html缩放悬停图像 但我宁愿使用
  • 如何对多行文本中的每一行应用填充?

    我已将背景颜色应用于 span 标签 也有左和右padding设置在它上面 问题是 padding仅适用于左侧 开始 和右侧 结束 span 而不是当文本换行时每行的左侧 开始 和右侧 结束 我该如何应用左和右padding to the
  • HTML 表格 - 固定列宽和多个可变列宽

    我必须建立一个有 5 列的表 表格宽度是可变的 内容宽度的 50 有些列包含固定大小的按钮 因此这些列应该有一个固定大小 例如 100px 有些列中有文本 所以我希望这些列具有可变的列宽 例如 Column1 tablewidth sum
  • 如何使用 JavaScript 检测 CSS 变量支持?

    最新版本的 Firefox 支持CSS 变量 http www w3 org TR css variables 但 Chrome IE 和许多其他浏览器没有 应该可以访问 DOM 节点或编写一个小方法来返回浏览器是否支持此功能 但我还没有找
  • 严格/过渡 DOCTYPE 之间的浏览器渲染差异

    前段时间我遇到了一个 问题 但我从未深入了解过 希望有人能够照亮它 当我将 DOCTYPE 从严格更改为过渡时 是什么导致某些浏览器 Chrome Opera 和 Safari 以不同方式呈现页面 我知道造成这种情况的一般原因是触发了怪异模
  • 有没有办法改变输入类型=“日期”格式?

    默认情况下 输入type date 显示日期为YYYY MM DD 问题是 是否可以将其格式强制为 DD MM YYYY 无法更改格式 我们必须区分有线格式和浏览器的表示格式 接线格式 The HTML5日期输入规范 https www w
  • 我正在尝试向我的 vue.js 项目添加背景图像

    我想添加覆盖整个页面的背景图像 然而现在看起来是这样的 我希望它跨越整个网页 在 vue js 中这将如何完成 我还想要一个动画工具栏 以便当页面不滚动时工具栏是透明的并呈现背景图像的外观 当它滚动时 工具栏将具有当前的蓝色 这是我的小提琴
  • 滚动时输入自动完成位置错误(chrome)

    我在输入文本的默认自动完成功能方面遇到了一些麻烦 滚动时它不会相应移动 我希望自动完成文本保留在输入的正下方 有办法做到这一点吗 我在 Chrome 浏览器版本 57 0 2987 133 中发生这种情况 fiddle https jsfi
  • 如何在 font Awesome 图标链接下方添加添加文本?

    我正在尝试在我的 Blogger 模板中的 font awesome Icons 下添加一些文本 这是我想要实现的目标的图像 我想要实现的外观图片 https i stack imgur com BVYlh png 但到目前为止我已经做到了
  • 当百分比填充定义元素高度时忽略 max-height

    The max height当内部填充大于最大高度值时 属性值似乎被忽略 例如 在元素上设置此类会导致最大高度被忽略 max height ignored height 0 or auto makes no difference max h
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • 将 CSS 生成的三角形拆分为 2 个水平不同的相同颜色

    正如您应该能够通过此代码看到的那样fiddle http jsfiddle net Xh36r 1 以及下面 我希望能够分割显示在第二个 div 顶部的 CSS 生成的三角形水平均等在 之间orange and green使用的颜色 现在它
  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714
  • 我可以根据同一容器中另一个元素的大小强制内联文本换行吗?

    考虑这个 jsbin http jsbin com ElIKOKe 3 edit html css output 我有这个html div class container span The lime outlined container h

随机推荐

  • jQuery 提交验证,最后有模式对话框?

    我现在有一个表格想要验证 假设一切都正确 我希望它弹出一个对话框确认其详细信息 这是我迄今为止的代码示例 var userConfirmed false dialog dialog buttons Yes function userConf
  • 如何理解ndarray.reshape函数?

    原型为reshape 就是它reshape shape order C 形状的类型是元组 所以我们应该用以下方式调用这个函数myarray reshape 1000 1 32 32 但是我发现很多人用myarray reshape 1000
  • 如何使 Apache mod_deflate 和 Transfer-encoding : Chunked 一起工作?

    我正在尝试在我们的网站上使用大管道概念 这意味着尝试以块的形式发送响应 而不是整体发送响应 以便用户感觉该页面很快 我通过在 java 中的响应对象上使用flushBuffer方法成功地做到了这一点 但是现在 当我尝试使用 apache m
  • 浮点到字符串:字符串长度问题

    我想将浮点值转换为字符串并创建以下简短示例 with Ada Text IO procedure Example is A constant Float 1 234 B constant Float 123 456 789 C consta
  • 寻找一种算法以(伪)随机顺序吐出数字序列

    假设我有一个数字序列 n n 1 n 2 n m 在不提前存储数字的情况下 我想创建一个函数 f 给定序列 1 2 3 m 将以随机 或至少伪随机 顺序吐出原始集合 例如 假设我的序列是 10 11 12 13 14 15 16 17 f
  • UWP - 调试器已附加到 .exe 但未配置

    I m developing Windows Store App UWP and I have a problem with native code I have this message 此代码第二次或第三次触发后抛出此异常 if Pro
  • 删除 DCG 中的左递归 - Prolog

    我在这个语法中遇到了一个关于左递归的小问题 我正在尝试用 Prolog 编写它 但我不知道如何删除左递归
  • 添加另一个对象时出现 java.util.ConcurrentModificationException

    我正在遭受这个例外 我的代码有什么问题 我只想将另一个人的重复名字分开ArrayList public class GlennTestMain static ArrayList
  • 保存时,将添加的文本视图位置保留在图像视图上

    有一个主要活动有两个按钮 一个是 添加文本 另一个是 保存图像 这是主要布局的一部分
  • 在 iOS 6 上使用 AFNetworking 下载文件

    我最近更新到 AFNetworking 2 0 文档说兼容iOS6 0 当我尝试实现下载方法 图像和视频 时 我正在构建一个 iOS 6 0 应用程序 示例使用 AFURLSessionManager manager AFURLSessio
  • 始终生成为 h2 DDL 中的身份

    在我们的项目中 我们使用 postgres 数据库作为开发到生产环境 对于 junit 测试 我们在内存数据库中使用 H2 想知道我们是否可以使用 GENERATE ALWAYS AS IDENTITY 创建 DDL 以在 H2 数据库中插
  • nohup 作为后台任务不返回提示

    我试图在后台运行一个长时间运行的任务 而无需登录并让终端返回提示 但是当我这样做时 该任务似乎进入后台 但我的提示不可用 除非我按 Control C 我想运行任务然后得到提示 staging php pos web nohup php t
  • 如何解析 Scala 中的命令行参数? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在 Scala 中解析命令行参数的好方法是什么 Related 如何解析 Java 中的命令行参数 https stackoverflow co
  • android jdbc odbc 连接

    我想将 odbc 连接连接到我的 Android 应用程序 我的数据库是oracle 10g 在我的代码中 我的表名称是 world 编译我的程序并关闭模拟器在 oracle 数据库中打开的表后 无法存储值 我在 cmp 中编译普通 jav
  • 使用 pandas.cut 和 IntervalIndex 后如何重命名类别?

    我使用离散化数据框中的一列pandas cut与创建的垃圾箱IntervalIndex from tuples 剪切按预期工作 但是类别显示为我在IntervalIndex 有什么方法可以将类别重命名为不同的标签 例如 小号中号大号 Exa
  • 如何使用 CSS 定位文本输入字段?

    假设您有以下 HTML
  • 使用JAVA从jar文件中读取MANIFEST.MF文件

    有什么方法可以读取 jar 文件的内容吗 就像我想读取清单文件以便找到 jar 文件的创建者和版本一样 有什么办法可以达到同样的目的 下一个代码应该有帮助 JarInputStream jarStream new JarInputStrea
  • 正则表达式匹配两个不相等的数字

    我想知道如何匹配两个不同的数字 所以 匹配 12 就可以了 但不能匹配 11 到目前为止我所拥有的是 我必须匹配像 P12 这样的字符串 我已经用这个正则表达式完成了 P 1 6 1 1 6 1 但现在我的问题是如何仅匹配 P12 或 P3
  • 应用程序之间的对象共享?

    假设我有一个每秒更新 1000 多次的大型数据数组 另一个应用程序想要在短时间内访问和读取数组 两个应用程序都在同一台机器上 我曾尝试使用 WCF 进行进程间通信 但每秒序列化和发送整个数组 或大型对象 数千次在性能方面是不可行的 有没有办
  • 如何优化连字符

    我正在努力解决浏览器处理逐行对齐文本连字的不同方式 我的文本有以下 css 设置 text align justify webkit hyphens auto moz hyphens auto ms hyphens auto hyphens