I have following in html:
.horizontal-div {
display: flex;
flex-direction: row;
}
.style-1 {
width: 140px;
height: 19px;
font-size: 16px;
color: #272d37;
margin-top: 19px;
margin-left: 8px;
}
.style-2 {
width: 16px;
height: 16px;
float: right;
margin-left: 295px;
cursor: pointer;
}
<div class="horizontal-div">
<div class="style-1">Dummy QC</div>
<div class="style-2">Some image</div>
</div>
What I observe is that 'Dummy QC' goes to next line, as:
What can be the solution to avoid it from going to next line?
You can use CSS white-space Property
.horizontal-div {
display: flex;
flex-direction: row;
white-space: nowrap;
}
.style-1 {
font-size: 16px;
color: #272d37;
margin-top: 19px;
margin-left: 8px;
flex-wrap: nowrap;
}
flex-wrap will work. The problem occurs only when resizing the page to go below your declared width. get rid of the width, or use a media query for small screen/size rules. tested and this works. will force the text to stay on one line.
Set overflow property to div you would, also select value that fits you most out of those:
div.ex1 {
overflow: scroll;
}
div.ex2 {
overflow: hidden;
}
div.ex3 {
overflow: auto;
}
div.ex4 {
overflow: visible;
}
Related
I have two images and two links. The problem is that the links come down of image. Like in the pictures
.motto {
font-size: 25px;
font-weight: bold;
line-height: 30px;
color: red;
text-align: center;
}
/*
.choiceImage a {
display: contents;
}*/
.choiceImage {
margin: 10px;
width: 790px;
height: 600px;
}
.choiceImage img {
width: 350px;
height: 350px;
margin: 20px;
border-radius: 2px;
display: inline-block;
}
.choiceImage div {
display: flex;
justify-content: space-around;
}
.choiceImage p {
background-color: beige;
border-radius: 10px;
color: black;
width: 270px;
font-size: 25px;
font-weight: bold;
text-align: center;
}
.choiceImage img:hover {
opacity: 0.5;
}
<div class="choiceImage">
<div>
<p>I'm looking for..</p>
<p>I offer something..</p>
</div>
<img alt="want something" src="image/want-something.jpg">
<img alt="offer something" src="image/offer-something.jpg">
</div>
I can fix that with display:context; for the link, but I want another answer for this problem.
The display: contents is expected to inherit from its grandparent choiceimage which is not set here so by default it is set to display: block.
Set the styles for the links like this:
.choiceImage a {
display: inline-block;
}
But I highly recommend using FlexBox, it is really efficient for lay-outing and also for responsive development.
I have the the following scenario where i need to push the entire word to the new line if it exceeds the width of the box. i have used CSS3 word-wrap property to achieve this. but it breaks the word as shown below.
I would like not to break a word and push the entire word to the next line if the text is more.
HTML
<div class="container">
<div class="img-container">
<img class="img-icon" src="/icons/image1.png">
</div>
<p class="icon-footer">Performance Validator</p>
</div>
CSS
.container {
position: absolute;
align-items: flex-start;
text-align: center;
box-sizing: border-box;
outline: 0;
display: flex;
flex-direction: column;
}
.container img-container {
display: flex;
}
.container .img-container .img-icon {
border:1px solid #000;
height: 64px;
width: 64px;
outline: 0;
}
.icon-footer {
margin: 0;
width: 64px;
color: #000;
font-size: 13px;
white-space: normal;
line-height: 1.5;
word-wrap: break-word;
}
As stated on this question, you could remove the word-wrap itself
.icon-footer {
margin: 0;
width: 64px;
color: #000;
font-size: 13px;
white-space: normal;
line-height: 1.5;
}
You can achieve it without using word-wrap: break-word property. By default the word will overflow out of the parent container which is the default property.
word-wrap: break-word property breaks the word to next line when it doesn't find ample amount of space.
I can't keep my image grid from dropping to the next line when resized. I've tried a bunch of different appraoches, including using DIV tags instead of span.. I think it's when the text is dropping a line. Any ideas what's wrong? See gif of what the problem is:
imagejumpinggif
Here's the snippet:
CSS:
.house {
width: 23%;
padding: 0;
margin: 0;
text-align: center;
float: left;
display: block;
}
.house_container {
#include span-columns(12);
text-align: center;
min-width: 100%;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
}
.house_illustration {
width: 100%;
padding: 3%;
}
li {
list-style-type: none;
text-decoration: none;
}
.label {
display: block;
text-align: center;
overflow: scroll;
}
HTML:
<div class="house_container">
<span class="house"><img src="img/house1.gif" class="house_illustration"/>
<p class="label">0-2500 sq ft<br> $275 </p> </span>
<span class="house"><img src="img/house1.gif" class="house_illustration"/>
<p class="label">2501-3000 sq ft<br> $300 </p> </span>
etc.
It looks like the second row is getting caught on the 2nd house span on the top row while it's resizing. If this is the problem, this should fix it:
.house:nth-child(4n+1){ clear:left; }
https://jsfiddle.net/17e5asgk/
I´m currently trying to make an inline article for a school project.
The text is overflowing and I´m not sure why, but I have an idea.
When I remove white-space: nowrap; - the text doing what it´s suppose to, fill the pink box, but then the inline doesnt work any more.
Any ideas? I have attached a codepen.
http://codepen.io/torarne_n/pen/PwQBmx
.slider {
width: 1225px;
height: 600px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
padding: 1rem;
background-color: #ccc;
margin-bottom: 10px;
}
.slides {
height:500px;
width:1225px;
display: inline-block;
background-color: aqua;
}
.intro-image {
height: auto;
width: auto;
display: inline-block;
background-color: pink;
}
.intro-text {
height: auto;
width: 300px;
display: inline-block;
background-color: fuchsia;
}
The issue is that the inner elements are inherriting the nowrap. Simply set it back to normal on the inner elements:
.intro-text {
height: auto;
width: 300px;
display: inline-block;
background-color: fuchsia;
white-space: normal;
}
I have a small issue with a title where I would like text to display on a single line rather than split onto two as im trying to arrange these blocks as a grid
jsFiddle
html
<div class="garage-row">
<a class="garage-row-title" href="/board/garage_vehicle.php?mode=view_vehicle&VID=4">
<div class="garage-title">1996 Land Rover Defender</div>
<div class="garage-image"><img src="http://enthst.com/board/garage/upload/garage_vehicle-4-1373916262.jpg"></div>
</a>
<div class="user-meta">
<b>
Hobbs92
</b>
</div>
</div>
css
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
.garage-row {
border: 1px solid #FFFFFF;
float: left;
margin-right: 5px;
padding: 12px;
position: relative;
width: 204px;
}
.garage-row img{}
.garage-image {
background-position: center center;
display: block;
float: left;
max-height: 150px;
max-width: 204px;
overflow: hidden;
position: relative;
}
.user-meta {
background: none repeat scroll 0 0 #2C3539;
color: #FFFFFF;
float: left;
padding: 10px;
position: relative;
width: 184px;
}
img {
border-width: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
}
.garage-row-title {
font-size: 22px;
font-weight: bold;
}
a:link {
color: #43A6DF;
}
font-family: 'Open Sans',sans-serif;
I would greatly appreciate if someone were able to help me get the title into one line rather than two or even fix it so if the title exceeds the width then it gets ellipses.
Add white-space: nowrap;:
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
jsFiddle
The best way to use is white-space: nowrap; This will align the text to one line.