Question

我正在尝试使用自定义文本的悬挂缩进创建段落。

css和html是：

＆＃13;

/* HANGING INDENT */
p{padding-left:6em;text-indent:-6em;}
/* INLINE-BLOCK SPAN SO MAIN TEXT STARTS AT 6EM */
p>span:first-child{display:inline-block;width:6em;text-indent:0em;text-align:left;}

＆＃13;

<p><span>Hanging</span>Other text on line. This is filler text to force a second line. This is filler text to force a second line. This is filler text to force a second line.</p>

＆＃13;

所有在IE，Chrome和三星浏览器上都没问题，但iOS（9.0.2）Safari缩小了悬挂文本。

如果删除了css span display：inline-block ，则文本将恢复为正常大小，但跨度将恢复为内联，因此忽略 width：6em ，将剩下的文字留在悬挂文本上。

如果删除了css p text-indent：-6em ，则挂起的文字会恢复正常大小，但不会再挂起！

任何人都知道如何让这个工作，同时保持简单？也就是说，没有特定于浏览器的填充程序或js。

最初，尝试过：

＆＃13;

/* INDENT PARAGRAPH */
p{position:relative;margin-left:6em;}
/* OUTDENT SPAN */
p>span:first-child{position:absolute;left:-6em;}

＆＃13;

<p><span>Hanging</span>Other text on line. This is filler text to force a second line. This is filler text to force a second line. This is filler text to force a second line.</p>

＆＃13;

然而，iOS不仅缩小了文本，而且还像超级一样提升了它，没有垂直对齐设置可以改变它！

Answer 1

我试图解决为什么iOS 9.0.2上的Safari会超出普通p标签内的所有文本，同时将所有其他文本保留在其他标签中的正确大小的原因时找到了解决方案。这会使页面看起来很奇怪 - 标题比文本小 - 但我怀疑它是为了让它们更具可读性。

现在，虽然我说我不想浏览器嗅探，但我确实有一些全局性的CSS使iOS Safari缩小到肖像的75％，这样每行至少有一些文字：

＆＃13;

@media screen and (max-width:320px){body{-webkit-text-size-adjust:75%;}}

＆＃13;

我的两个问题的解决方案是添加另一条线，使任何屏幕宽度超过320像素（如在风景中）使用100％（请注意，“没有＆＃39;不起作用”）：

＆＃13;

@media screen and (min-width:321px){body{-webkit-text-size-adjust:100%;}}

＆＃13;

注意：这适用于缩进的变体： a）使用填充和文本缩进。 b）使用位置。

就个人而言，我更喜欢位置变体，因为它更清洁。 text-indent css由所有子进程继承，因此必须小心将text-indent：0;在儿童元素的CSS中，这只是一个混乱。

iOS Safari缩小文本，用于悬挂缩进段落

1 个答案: