Display text inline from a separate container div - html

I'm trying make "the end" in the following code to appear inline with the lorem ipsum, and can't figure out how. Is it possible? I can't change the HTML structure at all. (nor can I add js, etc)
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
I want it to look like this:

If you are able to make changes to the CSS, then this is an easy solution. Just use display: inline, which will make the element only take as much space as necessary (acting like a <span> element).
However, if by chance, you are unable to, then there is no way I can think of for you to achieve this given your situation.
#parent {
width: 300px;
border: 1px solid red;
}
#block1, #block2 {
display: inline;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>

You need to set the two block containers to display: inline:
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
#block1, #block2 {
display: inline;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>

Related

CSS Truncate inline text only if needed

I'm trying to style a reusable component such that it will stay inline but truncate its contents whenever it overflows. What makes it trickier is that I need to have an icon on the right.
The main issue is that I need the icon to stay on the same line, so I compensate for it in the width of the truncated text (width: calc(100% - 40px)), which makes any non-truncating example be that much shorter than it's normal width.
See the snippet below and how the short example is barely visible.
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: 100%;
margin-right: 16px;
background: #f1f1f1;
}
.value-and-icon-wrapper {
display: inline-block;
width: 100%;
}
.icon {
padding-left: 5px;
}
.truncated-text {
display: inline-block;
width: calc(100% - 40px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
-webkit-line-clamp: 1;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">68 long text starting now 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</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
This is because you are using a lot of inline-block and the width of inline-block is defined by its content so if you set 100% - 40px for a child item, it means its width minus 40px
Try to do it differently like below using flexbox:
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-flex;
max-width: calc(100% - 16px); /* don't forget to account for margin here */
margin-right: 16px;
background: #f1f1f1;
}
.icon {
padding-left: 5px;
}
.truncated-text {
flex:1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now 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</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Without flexbox you can do it like below:
body, .container {
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: calc(100% - 16px); /* don't forget to account for margin/padding here */
margin-right: 16px;
background: #f1f1f1;
padding-right:20px;
box-sizing:border-box;
position:relative;
}
.icon {
padding-left: 5px;
position:absolute;
right:0;
top:0;
bottom:0;
}
.truncated-text {
display:block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now 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</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Try applying the style text-overflow: ellipsis to the div that contains the text to be truncated.
MDN Documentation for text-overflow

positioning inline-block DIV`s inside a DIV container (without flexbox)

I'm trying to vertically position two divs (1&2), set to 'display: inline-block'. Can't understand why vertical-align doesn't want to work?
Ps. Don't want to use flexbox...
<div>
<div id="div1">
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</span>
</div>
<div id="div2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
</div>
.parent {
border: 1px solid red;
height: 150px;
width: 100%;
display: table;
}
.parent > * {
display: table-cell;
text-align: center;
vertical-align:middle;
}
#div1,
#div2 {
display: inline-block;
border: 1px solid blue;
}
<div class="parent">
<div>
<div id="div1">
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</span>
</div>
<div id="div2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
</div>
</div>
Add one more parent div and give display:table and for the immediate child set display:table-cell then give vertical-align:middle;. Please see the code.
It wasn`t working as the height of DIV hasnt been set! After setting height of DIV, vertical alignment of other one started working.

Using CSS and HTML, change text-align if text doens't fit in a line

I have a list of items to show on screen. This is an example list with two items I would like to have:
My HTML is this:
<div class="row">
<div class="label">Site</div>
<div class="value">12 Oak Street, Vancouver</div>
</div>
<div class="row">
<div class="label">Note</div>
<div class="value">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
</div>
The tricky part which I don't know how to accomplish is aligning text of the values. If value can fit in the same row, it should be right-aligned. Otherwise, it should start in the next line and it should be left-aligned (like in the image above).
Can this be done with CSS? If needed, I can change the structure of HTML as well.
I'm afraid it's not doable using CSS only,
With JS and some calculations could help to change an element style when it "overlaps" another element.
The closest using plain CSS is this example which will only work when there's either really a small amount of text in .value or a really huge amount of text (that will make the float:right element actually span the full available width). Otherwise you'll rin into this issue: http://jsbin.com/vazaka/2/edit?html,css,output
(Don't use before reading the above)
html, body{height:100%; margin:0; font:16px/24px sans-serif;}
.row{
padding: 8px 16px;
border-bottom: 1px solid #ccc;
overflow:auto;
}
.row .label{
float:left; /* yaba */
color:#aaa;
}
.row .value{
float:right; /* doooo */
}
<div class="row">
<div class="label">Site</div>
<div class="value">12 Oak Street, Vancouver</div>
</div>
<div class="row">
<div class="label">Note</div>
<div class="value">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur beatae magni consequuntur. Nostrum veritatis fugit quas rerum, dicta quod consequuntur, deleniti totam consectetur ex eligendi blanditiis quibusdam voluptatibus culpa et.</div>
</div>
I have found solution that works, but it is somehow ugly because it duplicates the text in HTML. But at least, it doesn't need JavaScript. If someone provided a better solution, I would gladly accept it as the right answer.
html, body{height:100%; margin:0; font:16px/20px sans-serif;}
.row{
padding: 3px 16px;
border-bottom: 1px solid #ccc;
overflow: hidden;
width: 420px;
position: relative;
}
.label {
display: inline-block;
}
.value-right{
color: #aaa;
display: inline-block;
float: right;
}
.value-left{
color: #aaa;
display: inline-block;
position: absolute;
top: 23px;
left: 16px; /* the same as padding in .row */
right: 16px; /* the same as padding in .row */
background: white;
}
<div class="row">
<div class="label">Site</div>
<div class="value-right">12 Oak Street, Vancouver</div>
<div class="value-left">12 Oak Street, Vancouver</div>
</div>
<div class="row">
<div class="label">Note</div>
<div class="value-right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
<div class="value-left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
</div>
<div class="row">
<div class="label">Something long enough that</div>
<div class="value-right">almost fits in one row, but it doesn't</div>
<div class="value-left">almost fits in one row, but it doesn't</div>
</div>

How can I select odd and even elements with CSS?

Say I have some divs:
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
If these boxes need to be alternate colours I need to create some CSS which basically does the following:
.box-(odd-number) {
color:#000;
}
.box-(even-number) {
color:#fff;
}
Obviously I know the above is not the correct syntax. Could some one point me in the right direction?
Thanks
You can use the nth-of-type pseudo-class, combined with the keywords odd and even:
.box:nth-of-type(odd) {
background-color:#000;
}
.box:nth-of-type(even) {
background-color:#fff;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #f00;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
You can do this using nth-child() with Even and odd rules.
.box:nth-child(odd) {
background: blue;
}
.box:nth-child(even) {
background: green;
}
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
Or you can can do this where :nth-child(2n) represents the even and :nth-child(2n+1) represents the odd
.box:nth-child(2n) {
background: red;
}
.box:nth-child(2n+1) {
background: yellow;
}
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
You're looking for nth-child(odd) and nth-child(even), If you don't want to apply .box classname.
[class^="box-"]:nth-child(odd) {
color:#000;
}
[class^="box-"]:nth-child(even) {
color:#fff;
}
An example: https://jsfiddle.net/8tkcuuwm/
To get this working you need a container of which you can adress the odd and even children like this. You set the class to the container and Format it's children accordingly.
By this you only have to set the class once and can exchange it if needed, without having to modify each child separately:
<style type="text/css">
.container div:nth-child(odd) {
color:#F00;
}
.container div:nth-child(even) {
color:#00F;
}
</style>
<div class="container">
<div class="box-1">Lorem ipsum dolor sit amet.</div>
<div class="box-2">Lorem ipsum dolor sit amet.</div>
<div class="box-3">Lorem ipsum dolor sit amet.</div>
<div class="box-4">Lorem ipsum dolor sit amet.</div>
</div>
See this jsfiddle:
HTML
<div class="box box-1">Hello World</div>
<div class="box box-2">Hello World</div>
<div class="box box-3">Hello World</div>
<div class="box box-4">Hello World</div>
CSS
.box:nth-child(odd) {
background-color: #336699;
}
.box:nth-child(even) {
background-color: #222;
}
Short explaination:
We added another class to the boxes, called box. This is, so we can refer to every element of this type. (My hint: use ID's for the box-1, box-2 stuff, since they appear to be unique).
Using the pseudo-class nth-child in combination with odd or even, will affect every (as you may assume) odd- or even element.
if colours should alternate depending only on the order of the div elements, (no matter the class name) then you could use div:nth-child(2n) and div:nth-child(2n + 1)
On the contrary if it depends only on the last digit of your class name (no matter if your divs are in the right order) then you could write
[class^="box"][class$="2"],
[class^="box"][class$="4"],
[class^="box"][class$="6"],
[class^="box"][class$="8"],
[class^="box"][class$="0"] { ... }
[class^="box"][class$="1"],
[class^="box"][class$="3"],
[class^="box"][class$="5"],
[class^="box"][class$="7"],
[class^="box"][class$="9"] { ... }
Use nth-child in order to achieve this.
HTML
<div class="box"></div>
<div class="box"><div>
<div class="box"></div>
<div class="box"></div>
CSS
.box:nth-child(odd) {
background-color: #000;
}
.box:nth-child(even) {
background-color: #FFF;
}

Set equal height on 3 divs

i created 3 divs , i have to set equal height of all i tried with height:100% but its not working.all of these div have variation on them content but i need equal height of all.please help me!
<html>
<style type="text/css">
.b1{height:190px;width:150px;background:#963;float:left}
.b2{height:150px;width:150px;background:#955;float:left}
.b3{height:180px;width:150px;background:#966;float:left}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</body>
</html>
You need to set all parent elements height to 100%, in your case it will be:
body,html { height: 100%; }
Demo: http://jsfiddle.net/Cb4nU/3/
put this code in your css. i think this will help you..
.b2{
margin: 1px;
background-color: ;
height: 100px;
width:100px;
border: 1px solid ;
}
.b2 {
margin: 1px;
background-color: ;
height: 100px;
width:100px;
border: 1px solid ;
}
.b3 {
margin: 1px;
background-color: ;
height: 100px;
width:100px;
border: 1px solid ;
}
cheers...!
Wraping all 3 in a div with the height you want them to stretch to also works
http://jsfiddle.net/Cb4nU/2/
<div class="a">
<div class="b1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc massa, accumsan ut volutpat id, gravida porta turpis. Duis tincidunt feugiat est nec rhoncus. </div>
<div class="b2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc massa,</div>
<div class="b3">Lorem ipsum dolor sit amet</div>
</div>
.a{height:300px;}
.b1{height:100%;width:150px;background:#963;float:left}
.b2{height:100%;width:150px;background:#955;float:left}
.b3{height:100%;width:150px;background:#966;float:left}
Hi below code snippet will do the needful,
CSS:
.parent { display:table; }
.b1{ border:1px solid red; display:table-cell; width:150px;background:#963;}
.b2{ border:1px solid green; display:table-cell; height:150px;width:150px;background:#955;}
.b3{ border:1px solid blue; display:table-cell; width:150px;background:#966;}
HTML
<div class="parent">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
Changes :
Added parent container div
Removed height & float:left property from all div's in css
Added display property for all div's in css