如何在Div內正確渲染文本？

Question

在下面的例子中，你可以看到'c'和'x'從div出來，如何正確地放置在div中？

.d { 
 
    padding-left: 20px; 
 
    border-left-width: 2px solid; 
 
    border-left-style: solid; 
 
    border-left-color: rgb(255, 0, 0); 
 
    border-top-width: 2px solid; 
 
    border-top-style: solid; 
 
    border-top-color: rgb(255, 0, 0); 
 
    border-bottom-width: 2px solid; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgb(255, 0, 0); 
 
    display: inline-block; 
 
    height: 30px; 
 
    position: relative; 
 
    background-color: 'white'; 
 
} 
 
.controllContainer { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.controls { 
 
    border: 1px solid; 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 3px; 
 
}

<div class="d " style=""> 
 
    test text 
 
    <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round"> 
 

 
    </polyline> 
 
    </svg> 
 
    <div class="controllContainer"> 
 
    <div class="controls">c</div> 
 
    <div class="controls">x</div> 
 
    </div> 
 
</div>

Answer 1

將line-height加到.controls。

.d { 
 
    padding-left: 20px; 
 
    border-left-width: 2px solid; 
 
    border-left-style: solid; 
 
    border-left-color: rgb(255, 0, 0); 
 
    border-top-width: 2px solid; 
 
    border-top-style: solid; 
 
    border-top-color: rgb(255, 0, 0); 
 
    border-bottom-width: 2px solid; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgb(255, 0, 0); 
 
    display: inline-block; 
 
    height: 30px; 
 
    position: relative; 
 
    background-color: 'white'; 
 
} 
 
.controllContainer { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.controls { 
 
    border: 1px solid; 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 3px; 
 
    line-height: 9px; /* added here */ 
 
}

<div class="d " style=""> 
 
    test text 
 
    <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round"> 
 

 
    </polyline> 
 
    </svg> 
 
    <div class="controllContainer"> 
 
    <div class="controls">c</div> 
 
    <div class="controls">x</div> 
 
    </div> 
 
</div>

Answer 2

我猜這是什麼做line-height，所以加line-height: 0.3到.controls：

.d { 
 
    padding-left: 20px; 
 
    border-left-width: 2px solid; 
 
    border-left-style: solid; 
 
    border-left-color: rgb(255, 0, 0); 
 
    border-top-width: 2px solid; 
 
    border-top-style: solid; 
 
    border-top-color: rgb(255, 0, 0); 
 
    border-bottom-width: 2px solid; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgb(255, 0, 0); 
 
    display: inline-block; 
 
    height: 30px; 
 
    position: relative; 
 
    background-color: 'white'; 
 
} 
 
.controllContainer { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.controls { 
 
    border: 1px solid; 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 3px; 
 
    line-height: 0.3; 
 
}

<div class="d " style=""> 
 
    test text 
 
    <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round"> 
 

 
    </polyline> 
 
    </svg> 
 
    <div class="controllContainer"> 
 
    <div class="controls">c</div> 
 
    <div class="controls">x</div> 
 
    </div> 
 
</div>

預覽

你可能需要調整一點點地得到它的權利。因爲它可以在Firefox中正常工作，並在Chrome中顯示上圖。

Answer 3

的line-height =區域的高度將工作以及..

.d { 
 
    padding-left: 20px; 
 
    border-left-width: 2px solid; 
 
    border-left-style: solid; 
 
    border-left-color: rgb(255, 0, 0); 
 
    border-top-width: 2px solid; 
 
    border-top-style: solid; 
 
    border-top-color: rgb(255, 0, 0); 
 
    border-bottom-width: 2px solid; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgb(255, 0, 0); 
 
    display: inline-block; 
 
    height: 30px; 
 
    position: relative; 
 
    background-color: 'white'; 
 
} 
 
.controllContainer { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.controls { 
 
    border: 1px solid; 
 
    width: 10px; 
 
    line-height: 10px; 
 
    height: 10px; 
 
    margin: 3px; 
 
}

<div class="d " style=""> 
 
    test text 
 
    <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round"> 
 

 
    </polyline> 
 
    </svg> 
 
    <div class="controllContainer"> 
 
    <div class="controls">c</div> 
 
    <div class="controls">x</div> 
 
    </div> 
 
</div>

Answer 4

Line-height和text-align作品完美的罰款。由於文本沒有任何標籤內定義的，我們有使用線高度對齊，

.d { 
 
    padding-left: 20px; 
 
    border-left-width: 2px solid; 
 
    border-left-style: solid; 
 
    border-left-color: rgb(255, 0, 0); 
 
    border-top-width: 2px solid; 
 
    border-top-style: solid; 
 
    border-top-color: rgb(255, 0, 0); 
 
    border-bottom-width: 2px solid; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgb(255, 0, 0); 
 
    display: inline-block; 
 
    height: 30px; 
 
    position: relative; 
 
    background-color: 'white'; 
 
} 
 
.controllContainer { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.controls { 
 
    border: 1px solid; 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 3px; 
 
    line-height:7px;/*Add this*/ 
 
    text-align:center;/*Add this*/ 
 
}

<div class="d " style=""> 
 
    test text 
 
    <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round"> 
 

 
    </polyline> 
 
    </svg> 
 
    <div class="controllContainer"> 
 
    <div class="controls">c</div> 
 
    <div class="controls">x</div> 
 
    </div> 
 
</div>