Excessive content within div

Need help with fixing the height of a div using asp.net. Currently, I am hiding overflow content and looking for a solution. Here's my code snippet:

<div id="Content" style="height: 90px !important; overflow: hidden; text-decoration: none;
text-overflow: ellipsis; display: block; white-space: nowrap;">
abcd<br />
efgh<br />
ijkl<br />
mnop<br />
qrst<br />
uvwx<br />
</div>

My goal is to display content up to "ijkl" and then show More... in the overflow section as shown in this demo:

 abcd
 efgh
 ijkl
 more..

However, I'm unable to achieve this output. I prefer utilizing inline CSS. Any assistance would be greatly appreciated.

Best regards,

asp.netcsshtml

Answer №1

To showcase additional text below the div, consider incorporating a label in the following manner:

<div id="MainContent" style="height: 120px !important; overflow: hidden; text-decoration: none">
    example1<br />
    example2<br />
    example3<br />
    example4<br />
    example5
</div>
<label style="display: none">read more..</label>

Utilize jQuery to manage its visibility when the content exceeds the space available:

$(function(){
    if($('#MainContent')[0].scrollHeight > $('#MainContent').height())
        $('#overflowLabel').show();
});

View jsFiddle demo

Answer №2

Is this the desired output?

VIEW DEMO

HTML Markup:

<div id="Content" style="height: 60px !important; overflow: hidden;text-overflow:ellipsis; text-decoration: none;
    display: block; white-space: nowrap;">
    abcd<br />
    efgh<br />
    ijkl<br />
    mnop<br />
    qrst<br />
    uvwx<br />
</div>

Answer №3

The solution is within reach when utilizing the power of the JQuery API. Feel free to explore more by visiting this informative link.

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

What is the best way to determine if a character is valid for use in HTML rendering?

There are certain characters, like ordinal 22 or 8, that do not appear correctly in HTML (when using Chrome for example when copying and pasting them into this 'Ask question' editor; assuming utf-8 encoding). How can I identify which characters a ...

pythonhtml

What strategies can I use to keep text-area from wrapping onto a new line?

I'm having trouble with styling my description column <template v-slot:item.description="{ item }" class="description" style="overflow-wrap: normal"> {{ item.description }} </template> CSS <style scoped> ...

cssvue.jsvuejs2vue-componentvuetify.js

The method of using Windows authentication for accessing a SQL server

Our intranet hosts a web application that utilizes Windows authentication successfully. However, we are facing an issue when trying to connect this application to a database on a separate server. The problem lies in the fact that while attempting to log i ...

c#asp.netsql-server

MUI Gradient Tracked Button

Take a look at this Codepen example I created. It showcases a hover effect where the gradient follows the mouse cursor. In order to achieve this effect, I have defined two CSS variables - --x and --y, to keep track of the mouse position on the button. The ...

javascriptcssreactjstypescriptmaterial-ui

Interacting with PHP through JavaScript function calls

I am facing some frustration with my website due to an issue involving PHP. When I retrieve data from a PHP file, it returns a JSON list like this: {"Data":{"Recipes":{"Recipe_5":{"ID":"5","TITLE":"Spaghetti Bolognese"},"Recipe_7":{"ID":"7","TITLE":"Wurst ...

javascripthtmljson

What is the best way to layer a background image with a CSS gradient?

I've spent over an hour searching for the right answer with no luck, so I'm turning to you for help. On my main page, there's a div with a large image that looks like this: <div id="hero"></div> It's working perfectly at t ...

cssbackgroundgradient

Mouse over condensed text to show more information without impacting nearby elements

I have implemented a text-overflow: ellipsis on an element, and then added a hover effect to expand the text. How can I prevent this expanded text from affecting other elements above or below it? Here's how I've set the text: .box h3 { overfl ...

jqueryhtmlcss

Tips for maintaining consistent webpage layout across various screen sizes

Although this method may seem outdated, I have always been intrigued by how it was accomplished. In the past, before websites became responsive, pages would simply shrink down to fit on mobile devices without adjusting their appearance. How was this achie ...

htmlcss

When scrolling down, the popup window shifts its position

I have implemented a popup window which displays a list on hover. It works perfectly on the default page, but when I scroll down, the popup also moves with the scrollbar. Below is the HTML code that creates the hidden popup list initially and shows it on ...

javascripthtmlcss

How can I adjust the regular font size within a paragraph or link using bootstrap?

Looking at the fs-* classes can be very helpful, you can find them here: https://i.sstatic.net/l1Y22.png The issue I'm facing is that these classes only work for h1 to h6 headings, and not for smaller text. For example, I am unable to adjust the fo ...

htmlcsstwitter-bootstrapbootstrap-5

The lack of flexibility in this element stems from the fact that it is not classified as a flex item

I'm facing an issue with flexbox and its unusual behavior. I have set up flexbox for the parent element and used flex: 1 1 100%, but it's not working as expected. When I checked in Firefox Developer Tools, it says that the parent is not a flex co ...

htmlcssflexbox

Exploring the integration of pre-defined Tailwind classes within Next JS development

As I transition my project from Vite JS to Next JS, I am currently facing an issue with importing Tailwind styles from a file. Even though the file is being read by my project, the styles are not being applied as expected. I'm wondering if there is a ...

cssnext.jstailwind-cssvite

Navigating a collection of objects after a button is clicked

My current library project involves looping through an array of objects to display them on a grid based on input values. Here is the code snippet for my loop: const addBook = (ev) => { ev.preventDefault(); let myLibrary = []; let bookIn ...

javascripthtmlcss

Using jQuery to alter an href link's attribute

I am currently attempting to modify the content of a href using jQuery. After researching various solutions on this platform, I came across one that I am trying to use for implementation: How to change the href for a hyperlink using jQuery My current app ...

javascriptjqueryhtmlhref

Create a copy of a JQuery slider

Hello there, I'm a first time poster but have been reading for a while now. I've been working on creating a simple jQuery Slider and I'm facing an issue... I want to create a slider that utilizes minimal jQuery and can be easily duplicated o ...

jqueryhtmlcssslider

expanding the size of a div element on a webpage using jQuery UI

http://jsfiddle.net/nkesh7e0/1/ enter code here I recently experimented with jquery ui resizable and created an example in the provided fiddle link. However, I encountered an issue with the positioning of the anchors. I desire for the anchors to be posi ...

javascriptjqueryhtmlcss

I'm having trouble finding a solution to remove the white space

I've been troubleshooting a website and noticed some unexpected whitespace on the page. Even though I have set my page wrapper div and other elements to width: 100%, the content in between is not utilizing the full width of the screen. I suspect this ...

htmlcss

Optimizing Three.js for better performance

Recently, I delved into working with three.js and webgl for a personal project. My goal was to develop a wardrobe model based on user input. You can check out the project at this link: Initially, the rendering speed was fast and smooth without Materials a ...

javascripthtmlthree.jsrenderingwebgl

What is preventing the page from scrolling downwards?

Here's a simple question: Why can't I scroll down the page to see the rest of the content in a div that exceeds the length of the window? This has never happened to me before, and I've tried searching for solutions with no luck. I've in ...

htmlcssbootstrap-5

I successfully passed an array of objects to the "value" attribute of a <li> element, and then connected that array to the component's state. However, for some reason, the array is

I need to render specific data based on the value attribute assigned in the li tag, which is stored in a state called otherState in my implementation const [otherDetails, setOtherDetails] = React.useState([]); const state = { listitems: [ { id ...

javascripthtmlcssreactjsreact-hooks