"Przelewanie" CSS "kolor tła"

Próbuję naszkicować bloki kodu strony internetowej. Dywan kontenera zostanie przepełniony zarówno w pionie, jak iw poziomie. Problem polega na tym, że przepełnia się poziomo, a kolor pasiasty w paski jest zbierany. Próbowałem go również z obrazem w tle, ale też to zignorowałem. Dlaczego to robi i jak mogę to naprawić?"Przelewanie" CSS "kolor tła"

Dzięki.

Obrazek: http://zero.robotrenegade.com/q3w/background-overflow.png

internetowa (skala przeglądarkę szerokość dół, aby zobaczyć problem): http://zero.robotrenegade.com/q3w/code.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="created" content=""> 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 
    <link rel="stylesheet" href="" type="text/css" media="all" title="Default styles" /> 
    <title></title> 
    <!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      jQuery("pre code").html(function(index, html) { 
        return html.replace(/^(.*)$/mg, "<span class=\"line\">$1</span>") 
      }); 
     }); 
    </script> 
<style> 
.codeblock { 
    max-height: 25em; 
    overflow: auto; 
    margin: 1em; 
    border: 1px solid #ccc; 
    font-size: 1em; 
    line-height: normal; 
    border-radius: 8px; 
    box-shadow: 0px 0px 4px rgba(0,0,0,0.25); 
} 
.codeblock h1, .codeblock p { 
    font-size: 1em; 
    margin: 0; 
    padding: 0em 1em 0.5em 3.5em; 
    line-height: 2em; 
    background-color: #eee; 
} 
.codeblock pre { 
    margin: 0; 
    padding: 0; 
    font-face: 'lucida console',monaco,courier,'courier new',monospace; 
} 
.codeblock pre code { 
    counter-reset: line-numbering; 
    margin: 0; 
    padding: 0; 
} 
.codeblock pre code .line::before { 
    content: counter(line-numbering); 
    counter-increment: line-numbering; 
    padding-right: 0.5em; 
    width: 4.5em; 
    text-align: right; 
    color: #888; 
    border-right: 1px dotted #888; 
    display: inline-block; 
    background-color: #eee; 
} 
.codeblock pre code .line { 
    display: block; 
    margin: 0 0 -1.2em 0; 
    line-height: 1.5em; 
} 
.codeblock pre code .line:nth-child(odd) { 
    background: #f2f5f9; 
} 
/*.codeblock pre code .line:hover { 
    background: #4b95e5; 
    color: #fff; 
}*/ 
</style> 

</head> 
<body> 

<div class="codeblock"><!--<h1>Hello, this is an optional header.</h1>--> 
<pre><code>void idAF::Restore(idRestoreGame *savefile) { 
    savefile->ReadObject(reinterpret_cast<idClass *&>(self)); 
    savefile->ReadString(name); 
    savefile->ReadBool(hasBindConstraints); 
    savefile->ReadVec3(baseOrigin); 
    savefile->ReadMat3(baseAxis); 
    savefile->ReadInt(poseTime); 
    savefile->ReadInt(restStartTime); 
    savefile->ReadBool(isLoaded); 
    savefile->ReadBool(isActive); 

    animator = NULL; 
    modifiedAnim = 0; 

    if (self) { 
     SetAnimator(self->GetAnimator()); 
     Load(self, name); 
     if (hasBindConstraints) { 
      AddBindConstraints(); 
     } 
    } 

    savefile->ReadStaticObject(physicsObj); 

    if (self) { 
     if (isActive) { 
      // clear all animations 
      animator->ClearAllAnims(gameLocal.time, 0); 
      animator->ClearAllJoints(); 

      // switch to articulated figure physics 
      self->RestorePhysics(&physicsObj); 
      physicsObj.EnableClip(); 
     } 
     UpdateAnimation(); 
    } 
}</code></pre> 
<!-- <p>This is an optional footer, goodbye!</p> --> 
</div> 

</body> 
</html>

Źródło

2011-12-14 Obsidian

+1 za interesujące pytanie, bardzo ciekawa odpowiedzi .. – ptriek

jeśli wszystko inne zawiedzie, można oczywiście zawsze umieścić powtarzający się obraz tła (biały/szary) na .codeblock - który powinien być całkiem solidny (choć nie bardzo sexy) obejście. – ptriek

Obrazek tła @ptriek na ".codeblock" nie będzie działał, ponieważ nie będzie przewijany z tekstem, który pokonuje punkt zbierania zebry. Jeśli cokolwiek, obraz tła zostanie zastosowany do "pre" lub "kodu", ale wtedy pojawi się ten sam problem z usuwaniem tła. – Obsidian

Spróbuj float:left na .codeblock pre . Działa w przeglądarce Firefox.

<pre> mieści się wewnątrz pojemnika .codeblock, tak jakby nie było już miejsca. float powoduje, że twój element <pre> jest tak szeroki, że dopasowuje się do jego zawartości.

UPDATE

.codeblock pre { 
    float: left; 
    min-width: 100%;}

Works w Firefox, Opera, IE9 i WebKit

O ile rozumiem, to elementy wewnątrz pojemnika z overflow:auto zmieścić się wewnątrz obszaru, który jest widoczny domyślnie. Te elementy "width:100% są tylko tak szerokie, jak zewnętrzny pojemnik. W tym przykładzie w wewnętrznym pojemniku znajduje się znacznik code, który nie łamie linii, więc tekst wychodzi poza pojemnik wewnętrzny i powoduje przewinięcie zewnętrznego kontenera. Aby tego uniknąć, potrzebny jest wewnętrzny pojemnik, który pasuje do jego zawartości, a więc float:left.

Ale, jak sprytnie zauważyłeś (i nie zrobiłem tego), w ten sposób nie rozwinie się, jeśli zewnętrzny pojemnik jest szerszy niż kod, aby uniknąć sytuacji, w której musisz umieścić min-width:100%, aby użyć wewnętrznego pojemnika w najmniej cała widoczna przestrzeń wewnątrz zewnętrznego pojemnika.

Źródło

2011-12-14 23:44:16 szym

ok, rozwiązuje problem - ale tworzy nowy: szerokość wierszy nie rozszerzy się do 100% na szerszym ekranie – ptriek

teraz działa :) – szym

który wydaje się działać naprawdę, możesz wytłumaczyć? – ptriek

Linie poszerzamy jak każdy element bloku do maksymalnej szerokości - i to bez przelewu. I nie są ze sobą połączone - jeśli jeden jest większy, nie wpływa na innych.

Spróbuj zmienić je na coś innego niż elementu bloku tak:

.codeblock pre code .line { 
    display: table-row; 
}

rodzaje powiązanej tabeli, zmienić wysokość lub szerokość (komórki) wraz

http://jsfiddle.net/D7rND/

Źródło

2011-12-14 23:34:39

Jest to dobre rozwiązanie tylko w przypadku firefox. Brak opery lub webkita. – Litek

Potwierdzam, że to nie zadziała w webkicie – ptriek

Spróbuj:

.codeblock pre, .codeblock pre code { 
    display: inline-block; 
}

ten pracował dla mnie w Safari.

Źródło

2011-12-15 00:05:20

ten sam problem co @szym odpowiedź, tło nie rozszerzy się w szerszej przeglądarce – ptriek

Tak, zapomniałem wrócić i rozwinąć przeglądarkę. Przepraszam. –

Po prostu dodaj 'min-width: 100%' i będzie działać tak, jak OP oczekuje na krótkie linie. –

stosowanie odpowiedniej DTD format.it jest dobra na firefox mimo ...

Źródło

2011-12-15 14:49:27

Co? '' uruchamia tryb standardów, jest to najlepsze, co możesz zrobić. – duri

Właśnie dodałem {float:left} do div na którego tła były „odstrzelonych” w mojej sytuacji.

Po tej zmianie tła i obramowania zostaną rozszerzone wraz z przepełnionym tekstem. Tak jak przewijam poziomo tekst jest wyświetlany równomiernie z tym samym tłem i ramkami.

Przed dodaniem tego fragmentu css tło/ramka nie przepełniłoby poza część div, chociaż tekst byłby.

Źródło

2017-03-07 21:01:21 nschwan94

"Przelewanie" CSS "kolor tła"

Odpowiedz

Powiązane problemy