Ich habe einige Suchen Immobilien zum Überlauf in CSS- prüfen dies unter Code-Schnipsel,Wie Überlauf-Eigenschaft in CSS tatsächlich funktioniert?
.outer-div {
display: flex;
position: relative;
height: 3.5em;
width: 20%;
border: 2px solid #000000a3;
margin-left: 300px;
align-items: center;
border: 1px solid green;
}
.inner-div {
\t border: 1px solid blue;
position: absolute;
right: 1%;
font-size: 40px;
}<html>
<head>
</head>
<body>
<div class = "outer-div">
<div class = "inner-div">HelloWorld</div>
</div>
</body>In dem obigen Code-Schnipsel, die Innen div Behälter überläuft in die x-Richtung und nicht in y-Richtung. Aber wenn ich overflow: scroll hinzufüge, dann fügt es eine Bildlaufleiste in beide Richtungen hinzu (gut bis hier), aber Ich bin in der Lage, die Bildlaufleiste von Y-Richtung und nicht X-Richtung zu verwenden, trotz der Tatsache, dass der Inner-Div-Container ist in der x-Richtung übergelaufen. Wieso ist es so? prüft diese Schnipsel,
.outer-div {
display: flex;
position: relative;
height: 3.5em;
width: 20%;
border: 2px solid #000000a3;
margin-left: 300px;
align-items: center;
border: 1px solid green;
overflow: scroll;
}
.inner-div {
\t border: 1px solid blue;
position: absolute;
right: 1%;
font-size: 40px;
}<html>
<head>
</head>
<body>
<div class = "outer-div">
<div class = "inner-div">HelloWorld</div>
</div>
</body>
</html>Meine letzte Frage ist, wenn ich den Text mit einem Bindestrich trennen (-) oder einen Raum, , warum es in zwei Linien bricht und nicht weiter in der gleichen Zeile? Ich weiß, dass es wegen der Größe meines äußeren Behälters sein kann, aber Warum teilt es sich nicht, wenn ich Text ohne Leerzeichen gebe? prüfen unten,
.outer-div {
display: flex;
position: relative;
height: 3.5em;
width: 20%;
border: 2px solid #000000a3;
margin-left: 300px;
align-items: center;
border: 1px solid green;
}
.inner-div {
\t border: 1px solid blue;
position: absolute;
right: 1%;
font-size: 40px;
}<html>
<head>
</head>
<body>
<div class = "outer-div">
<div class = "inner-div">Hello World</div>
</div>
</body>
</html>Vielen Dank für Ihre Zeit und für Ihre Hilfe zu geben!
Die absolute Position berücksichtigt nicht die Größe des Containers in Richtung der Anker (in Ihrem Fall "rechts"). – Yashas