Question

我在HTML和CSS下面

这里的跨度内容与para内容重叠，有没有办法，我可以让这些数据不与para内容重叠，即使san内容以两行显示也没问题。

.chapter {
    margin-left: 5.0em;
    margin-right: 0.2em;
}
.para {
    text-indent: 0em;
    margin-top: 0.85em;
}
.para span.phrase {
    text-indent: 0em;
    margin-left: -4.75em;
    font-weight: bold;
    padding-right: 2.8em;
    position:absolute;
}

<div class="chapter">
    <div class="para">
<span class="phrase">8.04</span>The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div>
    <div class="para"><span class="phrase">25.101-25.102</span>
The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div>
    <div class="para"><span class="phrase">8AA.01</span>The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div>
</div>

Answer 1

指定phrase类的宽度将解决它：

.chapter {
    margin-left: 5.0em;
    margin-right: 0.2em;
}
.para {
    text-indent: 0em;
    margin-top: 0.85em;
}
.para span.phrase {
    width: 4.75em; /* <-- Here */
    text-indent: 0em;
    margin-left: -4.75em;
    font-weight: bold;
    padding-right: 2.8em;
    position: absolute;
}

<div class="chapter">
    <div class="para">
<span class="phrase">8.04</span>The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div>
    <div class="para"><span class="phrase">25.101-25.102</span>
The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div>
    <div class="para"><span class="phrase">8AA.01</span>The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div>
</div>

Answer 2

指定词组的宽度，并使用word-break: break-all

将单词分隔到下一行

.chapter {
    margin-left: 5.0em;
    margin-right: 0.2em;
}
.para {
    text-indent: 0em;
    margin-top: 0.85em;
}
.para span.phrase {
    text-indent: 0em;
    margin-left: -4.75em;
    font-weight: bold;
    padding-right: 2.8em;
    position:absolute;
    width: 70px;
    word-break: break-all;
}

<div class="chapter">
    <div class="para">
<span class="phrase">8.04</span>The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div>
    <div class="para"><span class="phrase">25.101-25.102</span>
The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div>
    <div class="para"><span class="phrase">8AA.01</span>The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div>
</div>

根据内容对齐跨度大小

2 个答案: