Wie kann ich Überlauf erzwingen: versteckt nicht mein padding-right Raum

Question

Ich habe den folgenden Code aufbrauchen:

<div style="width: 100px; 
overflow: hidden; 
border: 1px solid red; 
background-color: #c0c0c0; 
padding-right: 20px; 
"> 
2222222222222222222222111111111111111111111111113333333333333333333</div> 

(XHTML 1.0 transitional)

Was passiert, ist, dass die padding-right doesn Es erscheint nicht, es ist vom Inhalt belegt, was bedeutet, dass der Überlauf den rechten Abstand zum Auffüllen verbraucht und nach dem Auffüllen nur "abschneidet".

Gibt es eine Möglichkeit, den Browser vor dem Padding-Recht überlaufen zu lassen, was bedeutet, dass mein div mit dem Padding rechts angezeigt wird?

Was ich erhalte, ist das erste div im folgende Bild, was ich will, ist so etwas wie die zweite div:

image

Answer 1

Ich habe das gleiche Problem mit dem Überlauf: versteckt; Befolgen aller Auffüllregeln, außer für die rechte Seite. Diese Lösung funktioniert für Browser, die eine unabhängige Opazität unterstützen.

Ich habe gerade meine CSS aus:

padding: 20px; 
overflow: hidden; 

zu

padding: 20px 0 20px 20px; 
border-right: solid 20px rgba(0, 0, 0, 0); 

divs Behälter funktioniert gut, aber dass verdoppelt effektiv die Menge an divs auf einer Seite, die nicht notwendig fühlt.

Leider wird das in Ihrem Fall nicht so gut funktionieren, da Sie eine echte Grenze für das div benötigen.

Answer 2

Ihre beste Wette ist eine Verpackung div zu verwenden und die Polsterung am Set .

Answer 3

Ich hatte ein ähnliches Problem, dass ich löste, indem ich clip statt overflow verwendete. Auf diese Weise können Sie die rechteckigen Abmessungen des sichtbaren Bereichs Ihres div (W3C Recommendation) angeben. In diesem Fall sollten Sie nur den Bereich im Padding angeben, der sichtbar sein soll.

Dies ist möglicherweise keine perfekte Lösung für diesen genauen Fall: Da der div-Rahmen außerhalb des Clipping-Bereichs liegt, wird dieser auch unsichtbar. Ich habe das umgangen, indem ich ein Wrapper div hinzugefügt habe und den Rahmen darauf gesetzt habe, aber da das innere div absolut positioniert sein muss, damit clip angewendet werden kann, müssten Sie die Höhe auf dem Wrapperdiv kennen und spezifizieren.

<div style="border: 1px solid red; 
    height: 40px;"> 
    <div style="position: absolute; 
     width: 100px; 
     background-color: #c0c0c0; 
     padding-right: 20px; 
     clip: rect(auto, 80px, auto, auto);"> 
     2222222222222222222222111111111111111111111111113333333333333333333</div> 
</div> 

Answer 4

Wenn Sie ein rechts benachbartes Element zu dem in Frage stehenden Element haben, legen Sie Padding auf seiner linken Seite. Auf diese Weise wird der Inhalt des linken Elements bis zu seinem Rand, aber nicht darüber hinaus fließen, und die linke Füllung des rechts angrenzenden Elements wird die gewünschte Trennung erzeugen. Sie können diesen Trick für eine Reihe von horizontalen Elementen verwenden, die möglicherweise Inhalte enthalten, die abgeschnitten werden müssen, weil sie zu lang sind.

Answer 5

Wickeln Sie die div und gelten Polsterung an die Mutter

.c1 { 
 
    width: 200px; 
 
    border: 1px solid red; 
 
    background-color: #c0c0c0; 
 
    padding-right: 50px; 
 
} 
 
.c1 > .c1-inner { 
 
    overflow: hidden; 
 
}

<div class="c1"> 
 
    <div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333 
 
    </div> 
 
</div>