I have a big block of text including a list <li> </li> that I'd like to hide in ellipses overflow. However, I realize that when the <li> element is nested in a <span> for which I've added the overflow and ellipses properties to, it won't apply to the <li> element! i.e., the list will not be hidden within the ellipses as overflow, it still gets displayed.
What is a workaround here?
You can't put a <li> element inside a span. <li> elements must stay directly under the <ul> tag. And, text-overflow does not works on inline elements (the default display for a span). For the text overflow, try this:
li {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 40%;
}
<ul>
<li>Lorem ipsum, dolor sit amet consectetur</li>
<li>Lorem ipsum, dolor sit consectetur</li>
<li><span>Loremconsectetur ipsum, dolor sit amet consectetur</span></li>
<li>Lorem ipsum, consectetur</li>
</ul>
Related
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>
I'm trying to fill an unordered vertical list that continues on the next line every time the list reaches the length limit. But instead of simply displaying the next list item on the next line I want the list item to break and continue like this:
I don't want to do this with columns, rather that it breaks dynamically.
Maybe something like this to make the list horizontal and to create your own custom list-style-type?
Code:
<style>
ul {
list-style-type: none;
text-align: center;
width: 450px;
}
li {
display: inline;
}
li:before {
content: "\2022";
margin-right: 2px;
}
</style>
<ul>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
<li>Lorom Ipsum Dolor Sit Amet Lorem Ipsum</li>
</ul>
How about giving your <ul> a set max-width, then give your <li> display: inline; so they aren't block elements anymore and wrap like you want. However list-style-type will not work on the li's anymore because they are inline elements. You can still get your red bullet points working with background images, looks like you might be already doing this.
ul {
max-width: 220px;
list-style-type: disc;
}
ul li {
display: inline;
}
<ul>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
<li>Hey there this is a pretty long sentence</li>
</ul>
You can use css to change the way of items are listed.
Ex:
ul {
width: 250px;
display: inline-block;
}
li {
float: left;
margin-left: 20px;
}
<html>
<body>
<ul>
<li>item 1</li>
<li>item 1 item 2</li>
<li>item 1 item 2 item 3</li>
<li>item n</li>
</ul>
</body>
</html>
I'm trying to get a vertical list of <li>'s of varying height, where each has two <p> tags next to each other and has a height of the tallest <p> tag; the <p> on the left has a fixed width (128px) and the <p> on the right should take up the rest of the page but not wrap underneath the first <p>.
Here's sample HTML:
<ul>
<li> <!-- height = the tallest of the two p tags -->
<p class="category">Something (128px wide)</p>
<p class="description">Something long...
Shouldn't wrap underneath .category
</p>
</li>
<li> <!-- beneath the li above, probably different height -->
<p class="category">Another thing</p>
<p class="description">Another long description...</p>
</li>
</ul>
What should the CSS look like?
Flexbox can do the trick for you.
ul {
width: 300px;
}
li {
width: 100%;
clear: both;
display: flex;
flex-direction: row;
}
li p {
display: inline;
float: left;
background-color: #eeeeee;
}
p.category {
width: 128px;
}
<ul>
<li>
<!-- height = the tallest of the two p tags --->
<p class="category">Something (known width)</p>
<p class="description">Something long... Shouldn't wrap underneath .category
</p>
</li>
<li>
<!-- beneath the li above, probably different height -->
<p class="category">Another thing</p>
<p class="description">Another long description...</p>
</li>
</ul>
More Info:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
There are several ways to skin this cat. If I'm understanding what you're after correctly, I think that using table-row and table-cell display properties may be the easiest way to go.
Here's a jsfiddle:
https://jsfiddle.net/s2jzh31z/2/
That includes the following,
HTML:
<ul>
<li>
<p class="category">Something (known width)</p>
<p class="description">Something long and multiple lines.
Shouldn't wrap underneath category.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.
Lorem ipsum dolor sit amet consecteur adipiscing elit no numi.</p>
</li>
<li>
<p class="category">Another thing(known width)</p>
<p class="description">Something to the right,
determines the height of this "<li>"</p>
</li>
</ul>
CSS:
ul {
margin: 0;
}
li {
clear: both;
display: table-row;
width: 100%;
}
p {
display: table-cell;
padding: .5em;
vertical-align: top;
}
p.category {
width: 128px;
}
I took the liberty of vertical aligning and adjusting the padding a bit to make it look neater. The vertical align was one of the benefits I was looking for in using the table-row / table-cell approach.
To be semantically correct and 'new age' you could do this using CSS3's Flexbox layout but if this is table data (looks to be, using category and description) then you could restructure it as a table (which also helps if you need to support older browsers).
HTML would look like this:
<table>
<tr>
<td class="category">Something (known width)</td>
<td>Something long and multiple lines.sdsdsdsdsdsdsdsdsdsdsdsdddddddddddddddddddddddddddddddsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsssssssssssssssssssssssssssssdddddddddddddddddddddddsdssdsssssssssssssssssssssssssss
Shouldn't wrap underneath .category</td>
</tr>
<tr>
<td class="category">Another (known width)</td>
<td>Another long and multiple lines.
Shouldn't wrap underneath .category</td> </tr>
</table>
and your CSS:
.category {
width: 128px;
}
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>