Box verlängert sich automatisch

selection

hi,

weiß einer wieso meine Box aufeinmal eine längere Breite hat als die anderen?

Siehe Bild:

Spoiler anzeigen

[Blockierte Grafik: http://i.epvpimg.com/DnYbbab.png]

HTML

Spoiler anzeigen

PHP

<section class="post-list-item">

<section class="main-flex">
<p class="text-length"><?php echo htmlspecialchars($rowsafe['text'], ENT_QUOTES, 'UTF-8'); ?></p>
</section>

</section>

CSS:

Spoiler anzeigen

Code

main .post-list-item {
    display:flex;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    justify-content: space-around;
    flex-flow: row wrap;
    margin:0 auto;
    text-align:center;
    width:100%;
    background:#eee;
}

main #all-post .flex-flex {
    flex-basis: 70%;
    flex-grow: 0;
    flex-shrink: 1;
    background: #fff;
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center;
    vertical-align: top;
    border:1px solid #e5e5e5;
    padding-left:12px;
    padding-right:12px;
    padding-bottom:12px;
    background:#fff;
}

main #all-post .flex-flex .main-flex p {
    font-family:'Roboto',sans-serif;
    font-weight:400;
    color:#444;
    word-wrap:break-word;
    text-align:justify;
}

Alles anzeigen

basti1012

was heißt auf einmal ?

Hast du irgendwas geändert auf der Seite?Irgendeine Bibiliothek oder sonst was mit eingebunden.

Ich glaube mich dran zu erinnern das dieses Script mal lief,richtig ?

selection

Zitat von basti1012

was heißt auf einmal ?

Hast du irgendwas geändert auf der Seite?Irgendeine Bibiliothek oder sonst was mit eingebunden.

Ich glaube mich dran zu erinnern das dieses Script mal lief,richtig ?

Nein das passiert nur wenn der Text mit über z.b 100 Zeichen ist ohne das eine Leertaste betätigt wird.

Sailor

Überprüfe doch bitte, ob dein Selektor 'main #all-post .flex-flex .main-flex p' das richtige Element anspricht... denn eigentlich müsste das 'word-wrap:break-word;' für den Zeilenumbruch sorgen.

selection

Zitat von Sailor

Überprüfe doch bitte, ob dein Selektor 'main #all-post .flex-flex .main-flex p' das richtige Element anspricht... denn eigentlich müsste das 'word-wrap:break-word;' für den Zeilenumbruch sorgen.

Ja der Selektor ist richtig. Habe ohne Flex box gearbeitet und es klappt bei einem anderen Skript. Wenn ich flex-box verwende geht es nicht. Liegt vllt auch nicht direkt an flex-box aber irgendwas läuft da schief.

basti1012

Zitat von Sailor

Überprüfe doch bitte, ob dein Selektor 'main #all-post .flex-flex .main-flex p' das richtige Element anspricht... denn eigentlich müsste das 'word-wrap:break-word;' für den Zeilenumbruch sorgen.

wahr das nicht so das man dafür sein nee feste breite geben muß? Zb width:200px und dann wird bei 200px mit word-break da das word abgeschnitten ?

Sailor

Zitat von basti1012

wahr das nicht so das man dafür sein nee feste breite geben muß?

... hmmm... müsste man mal testen, ob das die Ursache sein kann. Aber die width:100% vom Elternelement, die ja schon im CSS drin ist, sollte es eigentlich auch tun.

basti1012

Nach meinen Spielereien bricht er immer am Ende des

* Link entfernt , weil existiert nicht mehr *

aber vielleicht habe ich das auch falsch verstanden

Sailor

teste mal folgendes....

Code

<style>
div.cover {
  width: 80%;
  margin: 0px auto;
}
p.break {
  word-wrap: break-word;
  color: #000;
  border: 1px solid #000;
}
</style>

<div class="cover">
<p class="break">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwkkkkkkkkkkkkkkkkkkkkkkkkkkkkkwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwlllllllllllllllllllllllwwwwwwwwwwwwwwwwwwwwwwwwwwppppppppppppppppppppppppppwwwwwwwwwwwwwwwwwwwwwwwwwmmmmmmmmmmmmmmmmmmmmmmmm</p>
</div>

Alles anzeigen

Macht bei mir genau was er soll... bricht bei 80%

basti1012

Richtig. weil ist ja am ende des bzw des div angekommen.

Jetzt ist die frage warum bricht es nicht bei ihn?

Sein elternElement ist 100% ,und sein auch?

Also bricht es erst am ende des containers.

Also müsste sein unteres Bild der wahrheit entsprechen und wenn er es wie beim ersten Bild haben will muß er den Elternelement eine andere grösse geben zb width:75%; oder wie gross das erste Bild ca ist

Sehe ich das richtig??

basti1012

@selection was passiert den wenn der Text noch länger ist ? Wird der Container noch grösser oder bricht der Text mal irgendwann? Wahrscheinlich direkt am Monitor Rand

selection

Zitat von basti1012

@selection was passiert den wenn der Text noch länger ist ? Wird der Container noch grösser oder bricht der Text mal irgendwann? Wahrscheinlich direkt am Monitor Rand

[Blockierte Grafik: http://i.epvpimg.com/9DhVeab.png]

Die Breite bleibt irgendwie gleich.

basti1012

hast du jetzt was geändert? Dann gib den Hauptcontainer doch ein kleineren width und nicht den wo das p drinne ist.

Ist das alles an html da oben ,oder sind um dein noch mehrere elternelemente?

selection

€: basti:

füg das mal bei codebin ein:

HTML:

Spoiler anzeigen

Code

<div class="main">
<div class="flex">
<p class="p1">>ggdddddfffffddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddgg</p>
</div>

<div class="flex">
<p class="p2">ggdddddfffffdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddgg</p>
<div>
  
  <div class="flex">
<p class="p3">
  ggdddddfffffddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddgg
  </p>
</div>
  </div>

Alles anzeigen

CSS:

Spoiler anzeigen

Code

.main {
      display: flex;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    justify-content: space-around;
    flex-flow: row wrap;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    background: #eee;
}

.flex {
 flex-basis: 70%;
    flex-grow: 0;
    flex-shrink: 1;
    background: #fff;
    margin: 0 auto;
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center;
    vertical-align: top;
    padding-bottom: 2em;
    border: 1px solid #e5e5e5;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    background: #fff;
}

.p1{
  width:100%;
  border:1px solid red;
word-wrap: break-word;
}
.p2{
  width:100px;
  border:1px solid red;
word-wrap: break-word;
}

.p3{
  border:1px solid red;
word-wrap: break-word;
}

Alles anzeigen

selection

Zitat von basti1012

hast du jetzt was geändert? Dann gib den Hauptcontainer doch ein kleineren width und nicht den wo das p drinne ist.

Ist das alles an html da oben ,oder sind um dein noch mehrere elternelemente?

Habe ich auch versucht. Hab main-flex auf width:50%; gemacht und einmal p, beides getestet und beides funkt. nicht

basti1012

hast du das schon online?? weil das wäre einfacher ,weil man dann den html baum sehen kann .

notfalls setze

*{

border:1px solid red;

}

in der css

ein und du kannst dann vieleicht besser sehen welcher Container wo hin geht und wie gross er ist.

Ab und zu sieht man auch container die vorher nie da wahren,bzw vergessen hatte oder sonst was

selection

Zitat von basti1012

hast du das schon online?? weil das wäre einfacher ,weil man dann den html baum sehen kann .

notfalls setze

*{

border:1px solid red;

}

in der css

ein und du kannst dann vieleicht besser sehen welcher Container wo hin geht und wie gross er ist.

Ab und zu sieht man auch container die vorher nie da wahren,bzw vergessen hatte oder sonst was

Alles anzeigen

http://test.liscon.bplaced.net/statistic.php?…&thema=beichten

Nicht wundern warum soviele Fehlermeldungen vorhanden sind, ich habe nur paar Seiten in dem Webspace eingefügt.^^

Sailor

... hmmm... eine leere Seite! Damit kann man natürlich nichts anfangen.

basti1012

Zitat von Sailor

... hmmm... eine leere Seite! Damit kann man natürlich nichts anfangen.

stimmt . warum ist die jetzt leer ?? Gestern wahr sie noch voll ,aber hatte gestern keine Zeit mehr genauer zu kucken.

selection

Zitat von basti1012

stimmt . warum ist die jetzt leer ?? Gestern wahr sie noch voll ,aber hatte gestern keine Zeit mehr genauer zu kucken.

Zitat von Sailor

... hmmm... eine leere Seite! Damit kann man natürlich nichts anfangen.

Tut mir leid , müsste jetzt wieder gehen.

Jetzt mitmachen!