css “字体样式:斜体”使文本从容器突出,切断文本

wfypjpf4  于 2023-03-09  发布在  其他
关注(0)|答案(2)|浏览(153)

最近我注意到斜体文本的边角(不到0.1em)被切掉了。经过检查,“font-style:斜体”已经超出了文本的宽度,将其截断。我尝试使用以下修复方法:
html italic letters protrude from their container (and may be cut by the next container' background)
但是设置右填充只是在文本宽度周围增加了一个缓冲区,边缘仍然被文本本身的自动宽度切断(我不能固定它为某个值,因为它会改变)。
有没有一种方法我可以添加一个“填充”到 * 宽度本身 * 来解决这个问题?例如,它会采取文本的宽度,并延长它一定的数量,如0.1 em。如果这是不可能的,有没有其他方法来创建斜体文本没有突出超过自动宽度任何如此轻微?

jfewjypa

jfewjypa1#

有点晚了,但也许它会帮助其他人。要查看文本容器中的截断字体,您可以使用overflow visible,就像下面的例子:

.text-container {
   overflow: visible;
}

它不会被削减了,应该工作得很好,如果你不需要在后端复制相同的文本。
示例:
x一个一个一个一个x一个一个二个x

0x6upsns

0x6upsns2#

这是相当笨拙的,但是假设你的文本行只有一行,你也许可以这样做:

em::after {
  content: '';
  padding: 1px;
}

添加一个空的内容字符串将使幻像填充出现。这应该给予你所需要的一点点空间。我相信这不会工作的换行虽然。
快速编辑,这可能是更好的实际上。

相关问题