On my website, the Lorem Ipsum text overflows the container. How can I automatically add a line break when the text reaches its container's borders.
I have created this JSFiddle to demonstrate my issue.
HTML:
<body>
<div id="wrapper">
<div id="content">
<div class="flex">
<div class="flexchild">
<img src="img.jpg" width="200"></img>
</div>
<div class="flexchild">
<p>
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
</div>
</body>
CSS
body,html {
background: #fff;
width: 90%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#wrapper{
background: #ccc;
height: 100%;
}
.flex {
width: 100%;
height: 340px;
display: -webkit-box;
display: flex;
}
.flexchild {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
overflow: auto;
display: block;
}
You need to use 0 instead of auto:
.flexchild {
-webkit-flex: 1 0 0;
flex: 1 0 0;
overflow: auto;
display: block;
}
See this JSFiddle, or run the code snippet below.
body,
html {
background: #fff;
width: 90%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#wrapper {
background: #ccc;
height: 100%;
}
.flex {
width: 100%;
height: 340px;
display: -webkit-box;
display: flex;
}
.flexchild {
-webkit-flex: 1 0 0;
flex: 1 0 0;
overflow: auto;
display: block;
}
<body>
<div id="wrapper">
<div id="content">
<div class="flex">
<div class="flexchild">
<img src="http://www.engraversnetwork.com/files/placeholder.jpg" width="200"></img>
</div>
<div class="flexchild">
<p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</body>
Further Reading:
MDN Documentation for flex-basis, the third parameter of flex
I'm not familiar with the css flex bits but removing these 2 lines makes the text flow as you want.
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
Related
I am trying to recreate this card using CSS.
However I can't figure out how to create the HTML and CSS. When I create a div and give it a background cololour and relative position, the Image is getting pushed out.
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 250px;
height: 350px;
background-color: white;
}
.CardHeader {
width: 100%;
display: flex;
flex-direction: column;
}
.CardHeader div {
width: 150px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
left: -15px;
}
.CardHeader img {
width: 100px;
height: 100px;
background-color: red;
}
<div class="Card">
<div class="CardHeader">
<div></div>
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
Few things to learn:
Place the image inside the div element
Use position:absolute on the image to allow you to move the image layer
Use overflow:hidden; on the div to 'cut off' the the image so it doesn't appear outside the container.
You also don't need the extra div element inside the card header - just use the card header as the parent.
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
height: 350px;
background-color: lightgray;
border-radius:10px;
}
.CardHeader {
display: flex;
flex-direction: column;
width: 300px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.CardHeader img {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: -20%;
left: -10%;
border-radius: 50%;
}
<div class="Card">
<div class="CardHeader">
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
As far as I know, width of a flex item adjusts to its content(when flex-direction: row;).
Here you see, the width of second .item is too long even though I set the width of h1 to 50%.
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
}
.test {
width: 50%;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
quo.
</h1>
</div>
</div>
But when I use px instead of %, the result that I wanted comes out. (Please view it in a full page)
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
}
.test {
width: 400px;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
quo.
</h1>
</div>
</div>
I can't understand how % is calculated in the first code. Can somebody help? Thanks
You have to apply the width on the .item element.
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
}
.item:nth-child(2) {
width: 50%;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, quo.
</h1>
</div>
</div>
You are not applying 50% to children (.item) but rather to (.test), which is not child of display:flex. Fix it and you'll get result!
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
width: 50%;
}
.test {
background: yellow;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,quo. </h1>
</div>
</div>
Today I've faced with specific design: there is row of cards and text inside card is aligned with another text from other cards. So title is aligned with title from other cards, text is aligned with other texts. It is very difficult for me to explain it clearly so I make a screenshot of the thing I'm trying to reach
By now I'm ready to completely ignore this issue due to impossibility of realization by pure css, but who knows, may be there is some solution?
UPDATE: I'm sorry for lack of explanation. Here is the code. My aim is to make the same alignment as in screeenshot above without using <br>s and fixed heights.
.list {
display: flex;
}
.item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
text-align: center;
background-color: rebeccapurple;
color: #fff;
}
.item>* {
flex: 0 0 auto;
}
.item>*+* {
margin-top: 10px;
}
.item+.item {
margin-left: 20px;
}
.icon {
background-color: red;
border-radius: 100%;
width: 20px;
height: 20px;
}
.title {
text-transform: uppercase;
font-weight: bold;
}
.text {
float: left;
clear: left;
}
<div class="list">
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, amet.</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
</div>
Thanks in advance.
What you are trying to do can be easily achieved using CSS grids and a bit of HTML restructuring.
The other way to do this would be to give fixed heights to your text elements.
If you are not familiar with CSS grids and don't like the idea of giving fixed heights to your elements, you can achieve similar result by using a little bit of JavaScript. Check the attached snippet.
I have written a small function equalizeClass() to equalize heights of all the elements belonging to a particular class. What it does is basically scans through all the elements belonging to a particular class and finds the element with maximum height. It then sets the heights of all the elements equal to the calculated maximum height.
Don't forget to call equalize() every time you update your related DOM elements.
I have not changed anything in your HTML structure.
In CSS, I have just added justify-content to your item class.
justify-content: space-between;
function equalizeClass(className) {
var images = document.getElementsByClassName(className);
var max_height = 0;
for (var i = 0; i < images.length; i++) {
if (images[i].clientHeight > max_height) {
max_height = images[i].clientHeight;
}
}
for (var i = 0; i < images.length; i++) {
images[i].style.height = max_height + 'px';
}
}
function equalize() {
equalizeClass("title");
equalizeClass("text");
}
window.addEventListener("orientationchange", equalize());
window.addEventListener('resize', equalize());
.list {
display: flex;
}
.item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 120px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
text-align: center;
background-color: rebeccapurple;
color: #fff;
}
.item>* {
flex: 0 0 auto;
}
.item>*+* {
margin-top: 10px;
}
.item+.item {
margin-left: 20px;
}
.icon {
background-color: red;
border-radius: 100%;
width: 20px;
height: 20px;
}
.title {
text-transform: uppercase;
font-weight: bold;
}
.text {
float: left;
clear: left;
}
<div class="list">
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, amet.</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor.</8>
</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
</div>
You need to make your title div a fixed height, ideally a height that is taller than the title text itself. See the code below for your title div:
.title {
text-transform: uppercase;
font-weight: bold;
height: 100px;
max-width: 100%;
}
Then give your text div this style:
.text{
display: flex;
justify-content: center;
align-items: top;
}
See this pen.
How could I adjust floating elements in CSS?
For the code below I got result as on attached picture.
I would like to have left and right divs aligned vertically.
* {
margin: 10px;
padding: 10px;
}
body {
background: #C0FFC0;
}
.header {
background: #C0C0FF;
height: 100px;
}
.left {
background: #FFC0C0;
float: left;
height: 200px;
width: 25%;
}
.right {
background: #FFFFC0;
overflow: hidden;
height: 200px;
}
.bottom {
background: #C0FFFF;
clear: both;
height: 100px;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Just wrap left and right divs inside another div (main) and you are good to go.
* {
margin: 10px;
padding: 10px;
}
body {
background: #C0FFC0;
}
.header {
background: #C0C0FF;
height: 100px;
}
.main {
overflow: hidden;
margin: 0px;
padding: 0px;
}
.left {
background: #FFC0C0;
float: left;
height: 200px;
width: 25%;
}
.right {
background: #FFFFC0;
height: 200px;
overflow: hidden;
}
.bottom {
background: #C0FFFF;
clear: both;
height: 100px;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="main">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Currently, I am using units: "vw" to make my textbox responsive.
First fiddle (Non-responsive): https://jsfiddle.net/jzhang172/w7yhd6xx/2/
#second{
height:635px;
background:gray;
}
#second-try{
height:635px;
}
.about-us-info {
margin: 0 auto;
width: 900px;
height: 313px;
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -450px;
top: 50%;
margin-top: -160px;
}
span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Second fiddle (Attempt at responsiveness using "vw"):https://jsfiddle.net/jzhang172/9Lagw1y6/1/
.section{
position:relative;
}
#second{
min-height:635px;
}
.about-us-info {
margin: 0 auto;
width: 46.9vw;
/* height: 16.3vw; */
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -23.4vw;
top: 50%;
margin-top: -160px;
}span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
width: 21.875vw;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
/*----Third section--------*/
#third{
min-height:488px;
background:gray;
}
#services-info{
margin-top:-125px;
border:2px solid white;
border-top:0px;
}
#services-header{
background:transparent;
color:white;
}
#services-paragraph{
color:white;
}
#services-header:before, #services-header:after {
content: "";
position: absolute;
height: 5px;
border-top: 2px solid white;
top: 19px;
width: 11.8vw;
}
#services-header:before {
right: 100%;
margin-right: .85vw;
}
#services-header:after {
left: 100%;
margin-left: .85vw;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<div class="section" id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Here are some errors that I'd like to be corrected but not sure how to:
1.) Is VW being used properly here? Is there a better solution?
2.) I'd like the height of each section to expand based on the content within while maintaining a min-height of each section (635px for the first and 488 for the second) because right now when re-sizing the browser smaller, the content overlaps anything underneath it.
Is there any problem using this solution? Is there a better solution?
Is this it? If not, let me know.
body {margin: 0;}
.sections {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.sections section {
-webkit-box-flex: 1;
-webkit-flex: 1 0 50%;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sections section>div {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
padding: 35px 50px;
border:1px solid #333;
margin: 50px 0;
max-width: 50%;
box-sizing: border-box;
position: relative;
min-width: 50%;
-webkit-transition: min-width .3s ease-out;
transition: min-width .3s ease-out;
}
#second {
background-color: white;
color: #333;
}
#third >div {
border-color: white;
}
#third {
background-color: gray;
color: white;
}
.span-header {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
background-color: white;
padding: 0 1rem;
font-size: 1.8em;
text-transform: uppercase;
text-align: center;
-webkit-transition: font-size .3s ease-out;
transition: font-size .3s ease-out;
white-space: nowrap;
}
#third .span-header {
background-color: gray;
}
#media (max-width: 767px) {
.sections section>div{
min-width: 60%;
}
.sections section>div {
padding: 15px 30px;
}
.span-header {
font-size: 1.25em;
}
}
#media (max-width: 359px) {
.sections section>div{
min-width: calc(100vw - 120px);
}
.span-header {
white-space: initial;
}
}
<div class="sections">
<section id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
<section id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
</div>
Please note I've also made a few adjustments to the html markup. Cheers!
jsFiddle
Question 1
It is perfectly fine to use vw this way. Percentage widths can generally do the same things as vw, but since you have some nesting, you would have to mess with the parent's widths to make percentages work. (This use case was noted by Chris Coyier.)
The nesting I'm talking about is <div class="section">s. Since the margins on the <body element have not been reset, these sections (on some browsers) end up a little narrower than the viewport. To use percentages, you would have to do this:
/* Reset margins */
body, html {
margin: 0;
padding: 0;
}
/* Now use percentages */
.about-us-info {
width: 46.9%;
}
span.span-header {
width: 47.4%;
}
Note vw has more issues with browser support (look at the known issues tab).
Question 2
In the code given, the text boxes are using position: absolute as part of the centering. Absolute positioning takes elements out of the document flow, and that is the reason the sections are not expanding to fit the content. If you want them to expand properly, you will need to use a different centering technique.
CSS table centering (as shown in the link above) would work:
<!-- First wrap your text boxes with containers... -->
<div class="section" id="second">
<div class="container">
<div class="about-us-info">
<!-- ... -->
</div>
</div>
</div>
Then remove the current absolute-based centering on the text boxes and add the following:
/* Make the parent a table: */
.section {
display: table;
width: 100%;
}
/* Make the container a table cell and center it: */
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}