Truncate text on a dynamic button positioned above a fluid container

Looking for a CSS-only solution to manage text within an image-defined box? The challenge is to place a button in the center if the text is shorter than the image, or cut it with ellipsis if longer. Also, the text should not exceed the box width. Any ideas on how to achieve this effect using CSS only? Check out the demo here: http://jsfiddle.net/h3emzbcq/3/

<div class="border-box">
<div class="item-pic">
    <img src="http://demo7.firstvoicemedia.com/u5.png" alt="" class="img-responsive">
    <div class="item-btn">
        <button class="btn btn-green"><span class="btn-text">Text place Text place Text placeText place Text place Text place</span></button>
    </div>
</div>

Text place

Appreciate any solutions you can offer. Thanks!

htmlcssjsfiddle

Answer №1

To get rid of the width attribute, replace it with max-width: 100% for the <button>:

.btn {
    border: 0;
    padding: 0;
    margin: 0;
    /* added */
    max-width: 100%;
}

Check out the updated fiddle here.

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

Creating a stunning effect with radial-gradient on an image element

I am looking to achieve a fading effect on an element using a radial gradient. While it works when I set an image as a background image, it does not work on the element directly. Is there a way I can accomplish this? My goal is to have the image fade fro ...

htmlcss

Trigger the click event on a specific class selector to extract the corresponding ID

I have an HTML Table with each row: <table> <tr><td><a href='#' id='1' class='delete'>delete</a></td></tr> <tr><td><a href='#' id='2' class='de ...

javascripthtml

The use of the readonly attribute in an <input> element prevents the widget

Attempting to utilize the https://github.com/Eonasdan/bootstrap-datetimepicker, but facing an issue where making the input field read-only also disables the date picker button, preventing access to the date picker widget. <div class="container"> ...

javascripthtmleonasdan-datetimepicker

extracting information from a webpage with Php

While the task at hand is straightforward, I am looking to incorporate a form to retrieve the URLs needed. Initially, I utilized file_get_contents but later transitioned to fopen. <?php $page = $_GET['page']; $marki = fopen($page, "rb"); ec ...

phphtml

Utilizing intricate nested loops in Angular.JS for maximum efficiency and functionality

Struggling to work with data looping in Angular.JS, especially when it comes to specific formatting Let's illustrate what I'm aiming for using Java Here's a snippet: int itemCount = 0; for(int i = 0; i < JSON.length(); i = i + 3) { ...

javascripthtmlangularjs

Is it possible to dynamically update the contents of a modal body and modal footer using

I'm dealing with a modal that dynamically populates two sections: modal-body and modal-footer. However, the issue is that only the content of modal-body changes dynamically while modal-footer remains static. Here's an example of the HTML code (w ...

javascriptjqueryhtml

setTimeout executes twice, even if it is cleared beforehand

I have a collection of images stored in the img/ directory named 1-13.jpg. My goal is to iterate through these images using a loop. The #next_container element is designed to pause the loop if it has already started, change the src attribute to the next im ...

javascripthtmlsettimeout

How can I dynamically adjust the font size of content in a React Material-UI Button when it's unexpectedly

In my web application project, I have created multiple choice questions where each answer is displayed within a single button: <Button fullWidth={true} variant="contained" onClick={(answer) => this.handleAnswer(this.state.answers[0].tex ...

htmlcssreactjsfrontendmaterial-ui

Tips for directing the scroll according to the current selection class

I am attempting to focus the scroll based on the selected class when clicking on the previous and next buttons. How can I achieve this functionality? Please review my code on https://jsfiddle.net/kannankds/bcszkqLu/ <ul class="kds"> <li>tile ...

javascriptjqueryhtmlcss

Issue with handlebars template

Below is a handlebars-template that I have: <script id="pins-list-template" type="text/x-handlebars-template"> {{#if ListCount > 0}} <ul> {{#each ListData}} <li> <img src="assets ...

javascripthtmlhandlebars.js

CSS: Unexpected value, received NaNrgb

I was attempting to incorporate a checkbox into a Bootstrap form that turns green when it is checked. Here is the code I used: function updateColor() { $("#check1").animate({ "background-color": "rgb(209, 231, 221)" }); } <script src="http ...

javascripthtmljquerycssbootstrap-5

magnify within a div with a set width

Looking for a way to make a div both zoomable and scrollable within a fixed-width container using transform: scale(aScaleRatio) for zooming in/out. Check out this demo for achieving the zoom effect. However, the inner div seems to have trouble aligning to ...

cssangular

External elements - My physical being is in a state of chaos

Hello there, I hope everything is well with you. I have been working on creating a form using MaterializeCss to calculate an invoice for a craftsman. The user is required to input a number or select an item. Everything seems to be going smoothly so far. ...

htmlcssmaterialize

Tips for positioning the navbar to avoid covering the logo:

I am experiencing difficulty in aligning my navbar. When I resize the window, the navbar overlaps with the logo... Here is the Fiddle Here is the code: <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background: rgba(0,0, ...

htmlcsstwitter-bootstrap

single calendar bootstrap-datepicker allowing users to select date ranges

Is it possible to create a single calendar range date picker with Bootstrap instead of using two separate calendars? Currently, I have implemented a solution with two calendars. $('#datepicker').datepicker({ }); <link href="https://cdnjs.cl ...

javascripthtmlcssbootstrap-4date-range

In HTML, favoring the use of "//domain.com" over "https://domain.com" or "http://domain.com" is recommended for greater flexibility and compatibility

Related Questions: Changing all links to // Network-Path Reference URI / Scheme relative URLs I have noticed some websites using the following format: background:url(//cdn.domain.com/images/bg-normal.png) They utilize "//", which the browser aut ...

htmlcsshttphttpshyperlink

How can data be transferred between a form and C# code, and then communicated back from C# code?

I have an HTML form that needs to send the user's selection to an aspx.cs file for processing and display the output in a lower textbox. Here is the form: <!-- Form --> <form action="lGen.aspx" method="post" id="lForm" runat="server"> ...

c#htmlasp.net

Unable to define an object within the *ngFor loop in Angular

In order to iterate through custom controls, I am using the following code. These controls require certain information such as index and position in the structure, so I am passing a config object to keep everything organized. <div *ngFor="let thing of ...

javascripthtmlangulartypescript

Animating content using CSS keyframes for dynamic changes

I'm trying to change the text of a div using keyframes with the code content:'text';, but unfortunately, the div remains empty and nothing happens. The content inside the #neon-sign div is not updating and stays blank: #neon-sign { p ...

csscss-animations

Troubleshooting PHP password change functionality issue

I'm having trouble with my code and need some help identifying the issue. The problem I'm facing is that when I try to set a new password, it doesn't seem to save in my database and I can't log in with the new password. Here's the ...

phphtml