行内分隔符填充/文本缩进

问题描述 投票:0回答:1

基于这个答案,我实现了一种更改表格布局以适应智能手机屏幕的样式。

它执行了我要求它执行的操作,除了一件事:如果文本需要在

inline
td
中自动换行,则第二行之后将忽略填充。它还会忽略任何添加
text-indent
等的尝试。

我不认为这特定于上面链接的答案。 例如,在下面的 MRE 中,只有 1

inline
div
,第 2、第 3、... 行都与页面的最左侧对齐。

<html>
<head>
</head>
<body>
<div style="display:inline; padding:10rem">
This is a long text to test what happens to a paragraph shown in an inline div. It is expected the 2nd line onward does not respect the padding.
</div>
</body>
</html>

我该如何纠正这个问题,也就是说,让

inline
元素中的线条彼此完美对齐?

html css
1个回答
0
投票

这是内联格式化上下文的一个功能。

当行内框被分割时,边距、边框和内边距没有 发生分裂的视觉效果。

<div style="display: inline; padding: 10rem;">
  This is a long text to test what happens to a paragraph shown in an inline div. It is expected the 2nd line onward does not respect the padding.
</div>

© www.soinside.com 2019 - 2024. All rights reserved.