Is it possible for me to conceal partially truncated lines of text completely?

When I place text in a container with a set height and hidden overflow, the final line that could fit sometimes gets cut off. Check out this example on jsFiddle or view the image for reference.

Is there a way to prevent the last line from being partially visible when this happens?

The issue arises when I have columns of dynamic height (100% of the parent's height, which is 80% of the body's height) containing blog post text. I want to display a "read all" button at the bottom if there is overflowing text (which is easy to determine). Currently, it looks unappealing with half-rendered text above the button.

I cannot remove the overflow because the columns need to end before reaching the navigation section at the bottom of the page.

css

Answer №1

If you're looking for inspiration on handling multiple lines with the text-overflow property, consider using JavaScript along with this resource: (source: With CSS, use "..." for overflowed block of multi-lines)

Answer №2

Take a look at my code snippet below:

 <li style="color: Black; font-weight: bold; oveflow:hidden; line-height: 1.2em;height: 2.6em; ">Page Size
                    <select id="ddlOrderstoDisplay" style="width: 50px;">
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="75">75</option>
                        <option value="100">100</option>
                        <option value="150">150</option>
                    </select>               
                </li>

If you include these lines within the tag as shown, it should be compatible with all browsers. I hope this proves helpful to you.

**overflow: hidden;
line-height: 1.2em;
height: 3.6em;**

Answer №3

Adjust the line-height as needed for optimal readability.

Find a comfortable setting that works for you.

Answer №4

Delete the overflow:hidden property

div
{
    width: 100px;
    height: 90px;
    background-color: black;
    color: white;
}​

Answer №5

To make it function properly, simply include the 'column-width' attribute as shown. For your situation, use column-width:100px

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The initial display of jqGrid columnChooser may not show the expected effect on the first attempt

Trying to implement jqGrid in my project has been mostly successful, but I am encountering two specific issues: The first time the columnChooser is clicked, it does not display the effect when clicking the done button. However, it works as intended on th ...

javascriptjquerycssjqgridfree-jqgrid

Can you provide guidance on configuring the image class within a DOM element using echo?

What is the method to set the class attribute of an img element using echo function? <div class="allnis" style="padding: 15px; text-transform: uparcase;"> <?php foreach($tv_id->networks as $prod){ echo "<img val ...

phpcssreact-nativereact-redux

Customize Bootstrap 4 Card Width in Card Decks for a Fixed Number of Cards per Row

My website features a deck of cards, and I must say, they are quite responsive. They adhere to the set amount per row for each resolution and maintain consistent height. However, there is one issue that bothers me - when there are 2 cards in a row, with 2 ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Problem with linear gradient in SVG text

I'm experimenting with adding a linear gradient to SVG text, but I'm struggling to specify the fill color in the text class. I came across an example online and decided to try it out, but when I entered the fill color for the text (in the sfp2 cl ...

csssvgcss-gradients

Steps for modifying the width of a horizontal line element so that it aligns with an input element

I'm attempting to dynamically adjust the hr element's length based on the length of the input element by using CSS. Additionally, I'd like to incorporate an animation that triggers when the input is focused. I came across a solution for th ...

htmlcss

Showing pdf documents without relying on third-party software

Within my Angular application, I have integrated the following snippet into an HTML template: <embed src="../assets/AOK_T2DM.pdf" style="width: 100%;height: 500px" type="application/pdf"> The representation of this code ...

htmlcssangulartypescriptpdf

preventing elements from moving unexpectedly as the navigation bar becomes fixed at the top of the page

I have a website that features a Bootstrap 3 navbar. This navbar is positioned 280px below a block div and becomes sticky at the top of the page when scrolled to that point. HTML (within < head > tags) <script> $(document).ready(function() ...

javascriptjqueryhtmlcsstwitter-bootstrap

Which JQuery plugins can transform regular <select> dropdowns into more stylish options?

After an extensive search, I was only able to locate one solution at this link. I scoured the entire internet for alternatives. ...

javascriptjqueryhtmlcssselect

Having trouble getting the show/hide div feature to work in a fixed position on the

Trying to show/hide a div using jQuery isn't working when the div is wrapped in a position:fixed element. However, changing it to position:relative makes the show/hide function work again. You can see an example of the working version with position:r ...

jquerycss

Comparing the impact of class and element selectors on CSS performance

Considering that CSS is read from right to left, I am pondering the balance between performance and readability when it comes to adding classes to HTML in order to more efficiently target elements in CSS. Additionally, I am curious about how using a gener ...

htmlcss

What is the method for displaying a div adjacent to a password input field?

I am attempting to display a password verification box next to an input field. The current logic is functioning properly, but the box containing all password requirements is not appearing in the correct position. Instead of being positioned adjacent to the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Fuzzy text upon scrolling in Internet Explorer version 6

Having a problem with text in Internet Explorer. When the page initially loads, the text appears clean and sharp. However, when I double-click on some white space of the page, the text becomes distorted as shown in the following image: Click here for alt ...

htmlcssinternet-explorerinternet-explorer-6

Finding the precise top offset position with jQuery upon scrolling – a step-by-step guide

I need help with detecting the offset top of a TR element when it is clicked. It works fine initially, but once the page is scrolled, the offset().top value changes. How can I resolve this issue? $(function() { $('tr').click(function() { ...

javascriptjqueryhtmlcss

I am looking to switch the input border-bottom color to blue when the input field is focused or has valid content

Can someone help me change the border bottom color of my input to blue in the following HTML code: .inputBox input:focus ~ input, .inputBox input:valid ~ input{ border-bottom: 1px solid #0000cd; } <div class="i ...

htmlcss

What is the best way to create a horizontal scrolling feature for a two-row layout using Bootstrap?

When using one row, the script works successfully. Here is an example of the code: html : <div class="testimonial-group"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> < ...

htmlcssscrollbootstrap-4row

Click event in jQuery to change the background color of <td> element

I'm still getting the hang of jQuery, so please bear with me. :) The purpose of this code is to color a square with the selected color when clicked if it's white, and turn it back to white if it's already colored. It works fine except for a ...

jquerycsscolors

Numerous column pictures that occupy the entire browser screen

I am looking to create a grid of clickable images that expand to cover the width of the browser window without any space on either side. Ideally, I would like each image to be 180x180px in size, but if it's easier they can resize based on the browser ...

javascriptjqueryhtmlcss

Having trouble with unblocking the UI using $.unblockUI()?

I have been developing a simple modal using blockUI that appears and asks the user to confirm their age. To avoid conflicts, I always create a separate page for each code I work on. However, the current html/javascript page I created is not working as inte ...

javascriptjqueryhtmlcssblockui

Negative top margin in IE9 causes an element to become stuck when a floated and cleared child element is present

I have encountered an unusual issue in IE9 and I have spent a significant amount of time trying to track it down and replicate it. Here is the code snippet that we are working with: <div class="container"> <div class="movable"> &l ...

htmlcsslayoutinternet-explorer-9margin

What is the best way to create grid designs using less in bootstrap?

When using Bootstrap without a preprocessor, we include classes directly into our opening tags like this: <div id="El" class="col-md-1"></div> Personally, I usually work with Bourbon Neat and Sass. With Sass, I can import mixins in the rules ...

csstwitter-bootstrapless