I have div block with ul list inside. And depending on the number of items div height getting bigger.And if the last item is not fit of div max-height it just cut it which is not very good(pic-1).
How to scroll per one element and if last item does not fit of div max-height hide it below(pic-2)?
PIC-1 https://i.ibb.co/0Bwnp02/Screenshot-9.png
PIC-2 https://i.ibb.co/jvmX9HN/Screenshot-10.png
<ul>
<li class="table-elem">
<p class="info-step">-1-</p>
<p class="info-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
mollitia id neque?</p>
</li>
...
</ul>
Related
When I set the dir attribute to auto on a parent element, it does not appear that the child elements inherit auto, but it does appear that they inherit ltr or rtl.
According to this:
In HTML the base direction is either (a) set explicitly by the nearest parent element that uses the dir attribute (which could be the html element), or, (b) in the absence of such an attribute, left-to-right (LTR).
And according to the spec:
If the element has a parent element and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value)
The directionality of the element is the same as the element's parent element's directionality.
If I understand that correctly, then every <p> should be inheriting its directionality from the parent <div> (in the last case below, auto), but it does not appear to be doing that when the directionality is set to auto. Why?
It appears this way in Chrome, Firefox, and Safari, so it's not a browser issue.
div {
border: 1px red solid;
margin: 1rem 0;
}
p {
margin: 5px;
border: 1px blue solid;
}
<!-- LTR -->
<div dir="ltr" id="div-ltr">
<p>
This div is set `ltr` so all of its descendants are `ltr` as well, no
matter the characters directionality
</p>
<p id="english-ltr">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique,
placeat
</p>
<p id="phoenician-ltr">𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀</p>
</div>
<!-- RTL -->
<div dir="rtl" id="div-rtl">
<p>
This div is set `rtl` so all of its descendants are `rtl` as well, no
matter the characters directionality
</p>
<p id="english-rtl">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique,
placeat
</p>
<p id="phoenician-rtl">𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀</p>
</div>
<!-- AUTO -->
<div dir="auto" id="div-auto">
<p>
This div is set `auto`, but the children all seem to default to `ltr`
</p>
<p id="english-auto">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique,
placeat
</p>
<p id="phoenician-auto">𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀</p>
</div>
It says the direction is inherited from the parent, not the value of the dir attribute.
Your div has no text nodes in it, so auto is treated as LTR.
Add some RTL text and it changes:
<div dir="auto" id="div-auto"> 𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀
<p>
This div is set `auto`, but the children all seem to default to `ltr`
</p>
<p id="english-auto">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique,
placeat
</p>
<p id="phoenician-auto">𐤀𐤍𐤊 • 𐤊𐤋𐤌𐤅 • 𐤁𐤓 • 𐤇𐤉𐤀</p>
</div>
I'm new at using flex in a stylesheet.
I am attempting to force two block level elements to be the same height.
Here is the fiddle: https://jsfiddle.net/r9pwzonx/
.flex {
display: flex;
flex-direction: column;
}
.first {
padding: 1em;
background: blue;
flex: 1;
}
.second {
padding: 1em;
background: red;
flex: 1;
}
<div class="flex">
<div class="first">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="second">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam minus aliquam assumenda consequuntur, laboriosam ducimus ad quis omnis, molestiae a iure nesciunt voluptate rem libero accusantium, deleniti, porro nemo excepturi?</p>
</div>
</div>
I do not see any change in the height of the smaller box to match the height of the larger box.
I do not see any change in the height of the smaller box to match the
height of the larger box.
You cannot do that in a flex box with that flex-direction: columnbecause that the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept.A flex container expands items to fill available free space, or shrinks them to prevent overflow.
If you give row a fixed height , I believe this should work as you expect. If you're not trying to use fixed height.It depends on the the things that inside on that flexboxes.
CODEPEN WITH LINE-HEIGHT
CODEPEN WITH FIXED-HEIGHT
I am no guru at CSS so please excuse what might be a basic question. I have an annoying problem which I can't seem to fix:
Here is my text without CSS line-height:
I would like to move the text up closer to the heading tags so I did this:
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
The Result
The result is perfect and exactly what I want, but... the problem comes when I resize the browser.
Problem Resizing the browser
My Question
Why is the text condensing on browser resize? What am I doing wrong? Should I not use the line-height property? Any workaround for this?
The line-height property is used to control how much vertical space is allocated for each line. In general, it is used to adjust how much space there is between lines within an element.
line-height: 1 means that lines are exactly big enough to fit the tallest letters and lowest descenders, with no space between. A line-height of more than 1 means there is some extra space between lines, and less than 1 will result in lines overlapping.
line-height: 0 means that a line of text has no vertical space allocated to it, so all lines will overlap each other in one line. That is what you are seeing here: the text is wrapping onto a second line, which is rendered over the top of the first line.
What you are trying to do is adjust the space between elements, not the space between lines in a single element. For this, the recommended approach is to adjust either margin or padding. Consider adjusting the margins of your elements until you have your desired vertical rhythm.
For a really detailed explanation of how all three properties work, see this CSS Tricks article on the box model.
Example
body { font-family: sans-serif; }
.cramped h2 {
margin: 0.4em 0 0.2em;
}
.cramped p {
font-style: italic;
margin: 0;
}
<section class="cramped">
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscin.</p>
</section>
Add this to your CSS:
h2 {
margin-bottom: -10px;
}
h2 tags have margins by default
Here is the JSFiddle demo
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
try this it works fine on my browser
try this
p{margin-top:-10px; font-style:italic;}
#media screen and (max-width:768px){
h2{font-size:18px;}
p{font-size:14px}
}
Line height usage is for setting the distance (height) of each line. 0 value gives no distance so you have this problem.
You should let the line-height in the default value and reset default h2 and p element margin.
line-height
On block level elements, the line-height property specifies the
minimum height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that
is used to calculate line box height. On replaced inline elements such
as buttons or other input element, line-height has no effect. [1]
h2, p {
margin: 0;
}
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
Reference: MDN - line-height - w3.org - line-height
I have a list and I want line items with long text to flow to the second row which would have a shorter line height than the line height between regular line items. For example:
<ul style="list-style:none">
<li>
Hotel Chain
</li>
<li>
Taxi Service
</li>
<li>
Tourist Trap & Retail Plaza
</li>
<li>
Travel Company
</li>
<li>
Local Olive Oil Company
</li>
</ul>
So hopefully that makes it clear what I'm wanting. Thanks for helping!
{EDIT}
I changed the code above.
The design is responsive, so when the screen shrinks the list width shrinks and some lines that took up one line then takes up two lines. I want those with two lines to have a shorter line height.
It's not clear what effect you are trying to achieve but there is a pseudo-element of ::first-line which might be what you are after
ul {
width: 200px;
}
li {
margin-bottom:1rem;
line-height: 1;
}
li::first-line {
line-height: 2;
}
<ul>
<li>lorem</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam soluta ex ipsam dignissimos, provident assumenda!</li>
<li>lorem</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, magni!</li>
<li>Lorem ipsum dolor sit.</li>
</ul>
::first-line # MDN
You can do that natively this paragraphs.
<p>First line item</p>
<p>Second line item</p>
<p>This is the third line item that will<br>wrap on a new line but have a<br>smallerline-height than others</p>
<p>Fourth line item</p>
<p>This fifth line item is the same as<br>the third in that its line-height<br>is different because it has multiple lines</p>
<p>And the sixth line is the same with<br>a smaller line-height</p>
No need to css, or you can specify a width to your paragraphs if you don't want do write the BRs.
http://jsfiddle.net/8q6wgw2x/
Does anyone know the CSS that makes the bullet point sit at the top of a multi-line bulleted list? For some reason with the template that I am using the bullet point centers to the left instead of simply sitting next to the first word if I have more than one line of text.
Set the list style position to inside the list item, see this demo fiddle.
CSS:
ul {
list-style-position: inside;
}
This is not an answer per-se but it may give others an insight to a similar visual situation with a different set of circumstances.
I had the same issue, like so:
My HTML looked like this:
<ul>
<li>
Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li>
Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!
<p>Lorem ipsum dolor sit amet.</p>
</li>
</ul>
And the CSS like this:
a {
display: inline-block;
vertical-align: middle;
}
See the offending part? The vertical-align: middle; declaration.
There are two solutions:
Solution 1
Remove the vertical-align: middle; declaration altogether.
Solution 2
Change the value: vertical-align: middle; to vertical-align: top;.
Result (as expected in the beginning):
Hope this helps.
You could do something like this:
(css)
li div:before
{
background-image:url('bullet.png');
}
(html)
<ul>
<li>
<div>
text<br />
more text
</div>
</li>
</ul>