Is there a way that the text can overlap when having the background-color?
<span style="font-family: Roboto, sans-serif !important; font-weight: regular; color=black; background-color:#E0E0E0; padding: 5px; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </span>
https://jsfiddle.net/z9zbjye3/
This is due to the inline nature of span.Give a line-height to avoid overlapping
<span style="font-family: Roboto, sans-serif !important;
font-weight: regular; color=black; background-color:#c44dff;
padding: 5px;line-height:30px ">Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation </span><br><br>
Related
GOAL: Align the first row's items (images) to the bottom, and the second row's items to the top.
CONDITIONS:
(1) Each item has a different height.
(2) Each item has a different width.
With tables it's dead simple:
.tall {height:100px; width:100px}
.short {height:50px; width:200px}
p {background:blue; margin:0px; display:inline-block}
td {vertical-align:top}
tr:nth-child(1) td { vertical-align:bottom; text-align:center}
<table>
<tr>
<td><p class=tall>.</td>
<td><p class=short>.</td>
<td><p class=tall>.</td>
<td><p class=short>.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</tr>
</table>
If tables were responsive, I'd use them.
If each item in the container is a image+text combo (one row in the flex), then css can't target and align the image separately because it's tied to the text.
If I use two rows, each one flexed, then it's no longer responsive: on small screens, all the first row items will print, then all the second row items will print, e.g., row1cell1 won't be matched with row1cell2. And on large screens, the columns won't line up because each text block is a different width.
SOLUTIONS:
(1) Is there a way to do it with flexbox?
(2) Is there a way to have tables be responsive?
(3) Could add whitespace to all the short images to make them as tall as the tallest one, which is a pain.
You can consider a trick with baseline alignment. The idea is that the image will define the baseline of each flex item. Then you consider width:0;min-width:100% to have the text equal to the image (How to match width of text to width of dynamically sized image?)
.container {
display: flex;
max-width:800px;
align-items: baseline;
border:1px solid red;
flex-wrap:wrap;
}
.container>div {
margin: 0 5px;
display:flex;
flex-direction:column;
min-width:0;
flex-grow:1;
}
img {
width:100%;
}
span {
width: 0;
min-width: 100%;
}
<div class="container">
<div><img src="https://i.picsum.photos/id/1001/100/300.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<div><img src="https://i.picsum.photos/id/1001/250/100.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
<div><img src="https://i.picsum.photos/id/1001/200/200.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<div><img src="https://i.picsum.photos/id/1001/200/400.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
</div>
In case you want to center the content isntead:
.container {
display: flex;
max-width:800px;
align-items: baseline;
justify-content:space-around;
border:1px solid red;
flex-wrap:wrap;
}
.container>div {
margin: 0 5px;
display:flex;
flex-direction:column;
min-width:0;
}
img {
width:100%;
}
span {
width: 0;
min-width: 100%;
}
<div class="container">
<div><img src="https://i.picsum.photos/id/1001/100/300.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<div><img src="https://i.picsum.photos/id/1001/250/100.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
<div><img src="https://i.picsum.photos/id/1001/200/200.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<div><img src="https://i.picsum.photos/id/1001/200/400.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
</div>
I'm trying to use the -webkit-line-clamp attribute (as seen https://css-tricks.com/almanac/properties/l/line-clamp/) but it doesn't seem to work with nested tags.
I'm trying to make this sample works :
<html>
<body>
<div style="width:200px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</body>
</html>
My content is generated by quill.js and it's wrapped by multiple p tags. I cannot change that. Do you have any idea of how I can make -webkit-line-clamp (or something similar) works?
If you wrap the two paragraphs in another div, your current code will truncate the displayed text.
Here is a working example:
.container {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
width:200px;
}
<html>
<body>
<div class="container">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</body>
</html>
Here is an example using span tags instead of paragraph tags. This approach allows "..." to become visible:
.container {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
width:200px;
}
<html>
<body>
<div class="container">
<div>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</span>
</div>
</div>
</body>
</html>
I'm trying to work out how I target the final element within a dynamically generated content set.
For example, all the generated content get spits out like so:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
In this case I'd like the final paragraph to have a margin-bottom: 0;
But the content could also be generated like so:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<div class="inner-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
Where by I'd like the final paragraph within the inner-box div to be given the zero margin.
I've tried adding block-inner:lastchild {margin-bottom:0;} but that doesn't work correctly. Just wondering how the best way to target this. Cheers!
There isn't any robust way to do this. .box > p:last-child will only get you a p element that is a child of .box; it won't match anything in your second example because the last child of .box is .inner-box, not a p.
.box p:last-child is not reliable because it will match all p elements that are the last children of their parents, which means it will match the last child of .inner-box here even though it's not the last p in the entire .box:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<div class="inner-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
And you have to worry about all the other possible ways the last p element could be nested somehow.
But if you know that the last p element can only ever either be a child of .box, or be a child of the last .inner-box for example, then you can enumerate those two possibilities:
.box > p:last-child,
.box > .inner-box:last-child > p:last-child
If you don't know the class name of that intermediate element you might be able to get away with not qualifying that :last-child at all:
.box > p:last-child,
.box > :last-child > p:last-child
And even then, that does not account for the fact that the last p may not even appear in the last child of .box.
Basically, you need to write a selector accounting for each and every possible nested structure in which the last p element may appear; there is no easy way to say "match the last p descendant of this container in a dynamic structure."
Use p:last-child
This will select the last <p> tag and only apply the styles to it.
.box {
border: solid 1px
}
.box p:last-child {
margin-bottom: 0;
color: red;
}
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
I have an <h2> title that introduce an <ol> list as follow:
<h2>A title</h2>
<ol>
<li>Lorem ipsum dolor sit amet,<br />consectetur adipisicing elit, sed<br />do eiusmod tempor incididunt ut<br />labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...</li>
<li>Lorem ipsum dolor sit amet,<br />consectetur adipisicing elit, sed<br />do eiusmod tempor incididunt ut<br />labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...</li>
<li>Lorem ipsum dolor sit amet,<br />consectetur adipisicing elit, sed<br />do eiusmod tempor incididunt ut<br />labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...</li>
</ol>
This pattern (title+list) is repeated a number of times and I have issues when printing because the title is sometimes separated from it's following list.
As an illustration of the problem: this jsfiddle demo gets printed as follows:
[...]
3. Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...
Some title
================================================================================
1. Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...
[...]
I've unsuccessfully tried to avoid page breaks after <h2> and before <ol>:
h2 {
page-break-after: avoid;
}
ol {
page-break-before: avoid;
}
I solved this by defining a CSS class called "page-break" which has the rule page-break-before: always !important and I applied it to the <h2> where the screwed up page break was occurring.
<h2 class="page-break">Some title</h2>
<style>
#media print {
p.padding {
margin-bottom: 9cm;
}
ol li {
page-break-inside: avoid;
}
h2 {
page-break-after: avoid;
}
ol {
page-break-before: avoid;
}
.page-break {
page-break-before: always !important;
}
}
</style>
Now it looks like this:
This might be able to be combined with the CSS :nth-of-type selector if you're looking to force a page break every three or four <h2>s .
Here's a JSFiddle.
So everything looks fine and works correctly except when you scroll down where the thumbnails are and the left bar is directly across from the thumbnail you can't select them... I know that the z-index div is covering it and thats the reason I can't select them but I need to figure out how to work around this but I can't seem to figure it out. Maybe a jquery solution?
http://originalpenguinaccessories.com/midwest/
Updated with a sample...
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#headerContainer {
width: 100%;
position:fixed;
z-index:9999;
display:inline;
}
#topbar {
width: 100%;
height: 20px;
background-color: #004570;
-webkit-box-shadow: 0px 5px 5px 0px rgba(100, 100, 100, .9);
box-shadow: 0px 5px 5px 0px rgba(100, 100, 100, .9);
}
#logo {
background-color: #004570;
height: 360px;
width: 250px;
margin-left: 50px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
display: inline-block;
-webkit-box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
}
#logo img {
margin-top: 30px;
margin-left: 15px;
}
#logo h2 {
margin-top: 100px;
color: white;
letter-spacing: 1px;
}
#link {
background-color: #004570;
float: right;
width: 135px;
height: 55px;
text-align: center;
margin-right: 40px;
color: white;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
-webkit-box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
box-shadow: 5px 5px 5px 0px rgba(100, 100, 100, .9);
}
#link p {
font-size: .8em;
}
#contentContainer {
width: 40%;
}
</style>
</head>
<body>
<div id="headerContainer">
<div id="topbar"></div>
<div id="logo">
<img src="" alt="">
<h2>Lorem ipsum dolor sit amet</h2>
</div>
<div id="link">
<p>Lorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
<h6>Lorem ipsum dolor sit amet</h6>
</div>
</div>
<div id="contentContainer">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="image-grid">
<div class="imageDiv"> Link
<h4>M442</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="imageDiv"> Link
<h4>M442</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="imageDiv"> Link
<h4>M442</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="imageDiv"> Link
<h4>M442</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Just apply position:absolute to your #logo and #link divs (and right:0 for the #link). This will take them out of the element flow and the parent div will collapse.
Try this one.
#logo {
position: relative;
z-index: 100;
}
.fs-pager-wrapper {
z-index: 50;
}