выровнять размер диапазона в соответствии с содержанием

Question

Я ниже HTML и CSS

здесь содержание диапазон перекрывается содержание пара, есть способ, где я могу получить эти данные не перекрывающихся содержание пара, это нормально даже если содержание 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

Укажите ширину фразы и разбить слово на следующую строку, используя 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>

Answer 2

Указание ширины для 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>