英文:
Large Layout Shift When Make Text to Bold
问题
我在HTML和CSS方面还有点新手。我正在建立一个简单的网站。
我注意到，当我将段落中的文本加粗时，会在PageSpeed Insights中引发大的布局位移问题。
我的页面是最佳Teen Patti游戏
我附上了PageSpeed Insights的截图。
我尝试使用以下链接生成CLS的GIF
https://defaced.dev/tools/layout-shift-gif-generator/
我已经尝试了一个小时，但不知道如何修复这个问题。如果有人能帮助我解决这个问题，请告诉我。
谢谢！
英文:
I am little new in HTML and CSS. I am building one simple site.
I have marked that when I make some text from paragraph bold, its causing large layout shift issue in PageSpeed Insights.
My page is Best Teen Patti Games
I am attaching screenshot of pagespeed insights.
I have tried to generate GIF of CLS using
https://defaced.dev/tools/layout-shift-gif-generator/
I am trying to fix it from last one hour but not getting idea what to do for fix the issue. Let me know if someone here can help me for fix it.
Thanks!
答案1
得分: 1
也许你可以增加整个文本的行高，足够容纳粗体和非粗体文本？
<div style="column-count: 3; line-height: 26px; border-top: 1px gray solid; padding-top: 30px; margin-top: 30px;">
<p class="p1">不带粗体的文本，不带粗体的文本，不带粗体的文本，不带粗体的文本，不带粗体的文本，不带粗体的文本，不带粗体的文本，不带粗体的文本，不带粗体的文本，不带粗体的文本</p>
<p class="p2">文本 <b>带粗体</b>，文本 <b>带粗体</b>， 文本 <b>带粗体</b>， 文本 <b>带粗体</b>， 文本 <b>带粗体</b>，文本 <b>带粗体</b>，文本 <b>带粗体</b>，文本 <b>带粗体</b>， 文本<b>带粗体</b>， 文本 <b>带粗体</b></p>
<p class="p3">文本 <b>带粗体</b>，文本 <b>带粗体</b>， 文本 <b>带粗体</b>， 文本 <b>带粗体</b>， 文本 <b>带粗体</b>，文本 <b>带粗体</b>，文本 <b>带粗体</b>，文本 <b>带粗体</b>， 文本<b> 带粗体</b>， 文本 <b>带粗体</b></p>
</div>
英文:
Maybe you can give the whole text an increased line hight - high
enough to accommodate both the bold and the non-bold text?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.p3 b {
font-weight:normal;
}
.p3 b:hover {
font-weight: bold;
}
.p2 b {
}
p {
vertical-align: baseline;
}
div p:first-child { margin-top: 0 }
<!-- language: lang-html -->
<div style="column-count: 3;">
<p class="p1">Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold,</p>
<p class="p2">Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text<b>with bold</b>, Text <b>with bold</b></p>
<p class="p3">Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text<b> with bold</b>, Text <b>with bold</b></p>
</div>
<div style="column-count: 3; line-height: 26px; border-top: 1px gray solid; padding-top: 30px; margin-top: 30px;">
<p class="p1">Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold</p>
<p class="p2">Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text<b>with bold</b>, Text <b>with bold</b></p>
<p class="p3">Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text<b> with bold</b>, Text <b>with bold</b></p>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论