主页 / 问题 / 1447135
Accepted
shaidullin2h
Asked:2022-09-09 21:11:46 +0000 UTC2022-09-09 21:11:46 +0000 UTC

由于行高，如何从文本中删除右填充

  • 772

大家好。对不起，如果这是一个愚蠢的问题，但我无法弄清楚标题 在此处输入图像描述

需要将文本在屏幕宽度上拉伸 100%，当我根据布局设置 line-height 时，它会超出边缘，如果你查看元素代码，那么最后会有一个边距标题，下划线在屏幕上可见，没有空格。

<header class="header">
        <div class="title">
            <h1>PORTFOLIO</h1>
        </div>
    </header>

CSS下面

.wrap {
    margin-left: 100px;
    margin-right: 100px;
    font-family: 'Bebas Neue', cursive;
    border: 1px solid black;
}

.header {
    max-width: 100%;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
    
}

.title {
    width: 100%;
    display: flex;
}

.title h1 {
    letter-spacing: 154px;
    font-size: 128px;
    text-decoration: underline;
    
    
}
html

0 个回答

  1. Best Answer

    不是因为line-height，而是因为letter-spacing。一般来说，以绝对单位设置此类参数并不是一个很好的解决方案。在我看来，最好完全拒绝letter-spacing，将标题的每个字母包裹在一个跨度中，并使用 flex 将其拉伸到整个屏幕宽度。使用 h1 伪元素制作下划线，并以相对单位设置文本的字体大小、下划线粗细和缩进，例如vw. 然后标题将变成“橡胶”，并会自动适应任何屏幕尺寸：

    .header {
    max-width: 100%;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.title {
    width: 100%;
    display: flex;
}
.title h1 {
    width: 100%;
    font-size: 8vw;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.title h1:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1vw solid #000;
    bottom: -0.5vw;
}
    <header class="header">
  <div class="title">
    <h1><span>P</span><span>O</span><span>R</span><span>T</span><span>F</span><span>O</span><span>L</span><span>I</span><span>O</span></h1>
  </div>
</header>

    • 2

相关问题