How can I prevent a span in CSS from stretching its parent element?

Utilizing the twitter bootstrap thumbnails successfully, we have implemented a description feature inspired by the bootstrap documentation. The distinction lies in our decision not to specify a size (e.g., .span4) for our thumbnails; instead, the content dynamically sizes them.

While this approach works well overall, we are seeking one alteration: preventing long captions from extending beyond the thumbnail's boundaries and hiding any excess length.

This task would be straightforward with fixed widths, but given that we opted against such constraints, I am uncertain how to proceed;

A link to a jsfiddle playground showcasing our dilemma: http://jsfiddle.net/BbCQK/

I initially attempted:

.caption {
    max-width: 100%;
    text-overflow: ellipses;
}

Unfortunately, this solution did not produce the desired outcome, as it merely stretched the container. How can I achieve the intended result?

Answer №1

Understood!

Using absolute positioning as a solution: http://jsfiddle.net/BbCQK/4/

.thumbnail {
    padding - bottom: 30px;
    position: relative;
}.thumbnail.caption {
    overflow: hidden;
    white - space: nowrap;
    position: absolute;
    padding: 0;
    bottom: 4px;
    left: 4px;
    right: 4px;
    text - overflow: ellipsis;
}

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

Exploring shader file content within three.js with the help of jQuery

I am trying to retrieve the content of a string that I have imported using HTML from within another script. To include the text file in question in the html file: <script src="shaders/fragmentshader.fs" id=fragmentshader></script> After impo ...

The cdkDropList in Angular's drag and drop feature does not support the application of element styles

Just wanted to share my experience in case it helps someone else out there! I've been working on an Angular project where I needed to create a Trello-like application. To enable dragging elements from one list to another, I installed the Angular cdk ...

A guide on dynamically adjusting text size based on viewport width and height in React with TailwindCSS

Utilizing React and Tailwind, I am working towards creating two overlapping rectangles with text. The top rectangle's text should be aligned to the left, while the bottom rectangle's text should be aligned to the right. Regardless of window size ...

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> ...

What is the best way to conceal a Material UI button with CSS?

For my TODO react app, I am using a Material UI button. My goal is to create a form with an input field and a submit button, but I want the submit button to be invisible so that users think the form submits when they press the "Return" key. import { Tex ...

Guide to generating a graph using PHP and quickcharts

I am working with a dataset that looks like this: Timestamp Value Importance 5/22/2022 4:19 3245 0.0234 5/22/2022 4:09 3246 0.0214 5/22/2022 4:09 3247 0.1234 5/22/2022 3:59 3248 0.0534 5/22/2022 3:59 3249 0.1234 5/22/2022 3:49 ...

Using HTML5 date input on an android browser

As I develop a web page catering to Android users, I have incorporated a date form control for users to input dates. However, I have noticed that on most devices, the native date selector does not pop up. Interestingly, on certain Samsung devices like the ...

extracting the identifiers and class names from an HTML document

I have successfully extracted tags from an HTML file using getElementByTagName. However, I am also interested in parsing the IDs and class names within the same HTML file. This is my current approach: $html = new DOMDocument(); $html->loadHTML ...

Tips for successfully passing array index as an image source in Vuejs with v-img?

Hi there! I'm currently attempting to cycle through an array of URLs and insert them into the src attribute. I'm struggling with the correct syntax to accomplish this task. Would you be able to lend a hand? I have an array named DataArray that co ...

Troubleshooting: Django project not functioning properly post transfer from Windows to Mac

Using Django 3.1.7 on a MacBook Pro now, I recently moved the Django project from a Windows 10 machine. Despite setting up the database and superuser again, running pipenv sync didn't result in serving any of my URLs or Admin page CSS styles. The serv ...

Vertical Image Alignment in Bootstrap 3

Looking for some help with a basic HTML structure here. I have a single row divided into two columns, each containing an image of the same size. What I need is to center one image both horizontally and vertically in each column. <div class="containe ...

Rearrange the sequence of specific child elements within the Div

Is there a way to reverse the order of specific div's children elements using just CSS? For instance: I need <div id="parent"> <a>A</a> <a>B</a> <a>C</a> <a>D</a> &l ...

Creating a multi-step progress bar in Yii2 that showcases completed steps using jQuery

Is there a way to automatically transition from one state to another once the order status changes in Yii2? var i = 1; $('.progress .circle').removeClass().addClass('circle'); $('.progress .bar').removeClass().addClass(&a ...

Prevent users from copying and pasting text or right-clicking on the website

I have been struggling to completely disable the ability for users to copy and paste or select text on my website across all devices. After much searching, I came across a solution that I implemented on my site. Below the <body> tag, I inserted the ...

Is it possible to include a border/stroke on a Raphael picture?

Currently, I am attempting to enhance a Raphael image element by adding either a border, stroke, or drop shadow. My end goal is to create an animated glowing border effect. Previously, I successfully implemented this on traditional HTML elements using Java ...

What causes my words to link together, and what is the term for this phenomenon?

Is there a specific term for the way my font is changing automatically? How can I emulate this effect on other text? And how do I remove it if needed? https://i.sstatic.net/yIe2f.png ...

Enhancing Transparency of WMS Layers in OpenLayers

I need help figuring out how to add transparency to a WMS layer in openlayers. Here is the current javascript code for a non-transparent layer: var lyr_GDPSETAAirtemperatureC = new ol.layer.Tile({ source: new ol.source.TileWMS(({ ...

What precautions should I take to safeguard my HTML/CSS/JS projects when sharing a link with my employer?

Picture this scenario: you need to share a link for your work, but you want to protect it from being easily copied or developed further by someone else. However, since it's a document, any browser can still view it. Can anyone recommend a tool that wi ...

Tips for concealing scrollbar track without the use of overflow

Issue with Mystery Scrollbar A strange phenomenon is occurring on all pages every time the user reloads - a mysterious scrollbar track appears out of nowhere. Initially, there is no sign of this scrollbar track, making it even more puzzling. Despite the ...