< >

flexbox-zeilen-umbruch-test.php


Quell Code


<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>zeilen umbruch test</title>
<link rel="icon" type="image/png" href="http://sebastian1012.bplaced.net/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> 
*{
  margin:0;
  padding:0;
}
body{
  display:flex;
  flex-direction:column;
}
nav{
  height:50px;
  background:grey;
  color:white;
  text-align:center;
  font-size:30px;
}
main{
  display:flex;
  min-height:calc(100vh - 100px);
}
aside{
  display:flex;
  flex:1;
  background:lightblue;
  padding:10px;
}
#content{
  padding:10px;
  flex:3;
  white-space:pre;
  color:black;
}
footer{
  height:50px;
  background:green;
  color:white;
  text-align:center;
  font-size:30px;
}
</style>
</head>
<body>
   <nav>
       Navigation
   </nav>
   <main>
      <aside>
         nav2
      </aside>
<div id="content">
Teste mal ...
Wenn du hier  unten einen Text rein schreibst  mit mehren Zeilenumbrüchen durch Enter drücken,
kopierst du den Text mit Copy & Paste  und kopierst den in dein Html Document rein.
In den document gibst du den Tag die Css white-space:pre; mit.
Dann speichern und Online stellen.
Dann sollte es ohne probleme  so angezeigt werden,wie man das hier auch sehen kann.
Mit diesen,
und diesen Umbruch.
Wie sieht es bei dir aus ?
Bei mir so wie erwartet
http://sebastian1012.bplaced.net/homepagebasti1012/forumscripte-februar-2019/zeilen-umbruch-test.php
</div>
       <aside>
             bla
       </aside>
   </main>
   <footer>
         Footer
   </footer>
</body>
</html>