Attempting to proportionally adjust the size of a span based on the size of its contents

It seems like a simple request, but I know it might actually be quite challenging to implement. It's been a while since I've worked with HTML.

My main requirement is that I only need to support IE. I know WebKit is popular, but I'm restricted to using IE until a WebKit browser is available on Windows Phone 7.

I have a piece of text that I want to animate horizontally in and out. I don't want to measure it beforehand due to internationalization concerns. Ideally, I would like to achieve something like this:

<span id="parent" style="width: 50% of child's size">
  <span id="child">Hello, cruel world</span>
</span>

And I want it to appear as:

Hello, cru

Is there any way to make this happen?

htmlcssinternet-explorer

Answer №1

David mentioned that the span does not have any children. To make the span take up 50% of its parent's width, simply set it to display as a block (display:block) and specify a width of 50%. Add overflow:hidden to hide any overflow content beyond the 50% limit.

-- UPDATE 2 --

Below is the JavaScript code without jQuery. It accomplishes the same result as the jQuery example provided earlier. Copy and paste this code into a script tag to implement the functionality.

//Setting up variables
$ = document;
$parent = $.getElementById('parent');
$child = $.getElementById('child');

//Adjusting child styles
$child.style.width = $child.offsetWidth+'px';
$child.style.display = 'block';

//Adjusting parent styles
$parent.style.width = ($child.offsetWidth*0.5)+'px';
$parent.style.overflow = 'hidden';
$parent.style.display = 'block';

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

Guide to incorporating a shiny application into an Rmarkdown HTML file

Currently, I am trying to craft an HTML document using RMarkdown that includes text, R code, and a Shiny application embedded within it. In my attempts, I considered using the asis=TRUE for the shinyApp(ui, server) block. However, I discovered that RStud ...

htmlrshinyrstudior-markdown

position the next and previous buttons of the bootstrap carousel to be located outside of the images

I am currently using a bootstrap carousel with the following code: <div class="slider-main-container d-block"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> ...

htmlcssbootstrap-4carousel

retrieving information from JSON using jQuery

Struggling to fetch data from a JSON file using jQuery? It seems like it's not working as expected. I'm trying to retrieve only the days from the file, and when clicking on a specific day, all the data related to that day should be displayed. For ...

javascriptjqueryhtmljson

The functionality of jQuery smooth scrolling to an anchor is only effective when the page is at the top and there is

Currently, I am working on designing a simple one-page website featuring a fixed menu that smoothly scrolls to specific sections on the page upon clicking the menu items. However, I have encountered an issue where the scrolling works perfectly only when t ...

javascriptjqueryhtmlcss

Using a dashed border stroke creates a unique look when combined with border-radius properties

I have been experimenting with different methods to increase the distance between border strokes on my element. So far, I have tried various approaches without success. For example, I explored this resource Unfortunately, the issue arises when I incorpor ...

htmlcssborderborder-radius

Utilize MySQL to populate highcharts with data

Learning the ropes of web programming, I have a personal project to monitor expenses. Simply put, my database stores data on total expenditures for this month and last month. I am able to display it manually (via echo), but I'm struggling to pass the ...

phphtmlmysqlhighcharts

What is the recommended method for removing CSS classes in the Sencha ExtJS framework during a component event? (Those pesky red lines)

Occasionally, an aggravating red line will appear unpredictably when adjusting the size of this component using its split bar located at the top edge of the component. I managed to find a way to permanently eliminate the red line by removing its CSS class ...

cssclasseventsextjs4removeclass

Issue with duplicate selectors not being merged in SASS partials

Is there a way for SASS to combine duplicate CSS selectors from multiple files into a single output file? In my current setup, I have the same CSS selector present in separate SASS partials files that are all included in a master file. For example: File1 ...

csssass

AngularJS: Extending HTML templates through inheritance

Query: How can I avoid redundancy in similar HTML templates? About: I have multiple templates for the same view/directive that need to be adjusted based on the environment. Although most of the templates are similar, there are certain sections that vary ...

javascripthtmlangularjstemplates

Struggling to extract feedback with Selenium in Python

I am looking to extract reviews from a specific webpage on Sephora's site: . When inspecting the reviews, I found this example syntax: <div class="css-7rv8g1 " data-comp="Ellipsis Box ">So good! This primer smooths my skin and blurs my pores so ...

pythonhtmlcssseleniumweb-scraping

Struggling to eliminate margins in a React web application

Can anyone assist me with removing the large white margins on my react project? Here are some solutions I have attempted. * { margin: 0; padding: 0; } /-/-/-/ body { max-width: 2040px; margin: 0 auto; padding: 0 5%; clear: both; } I've exp ...

cssreactjsreact-redux

Controlling the Size of Images

I am currently dealing with a significant issue related to saving bandwidth and storage. My website (built on PHP/Laravel) features 5-6 different image sizes in the desktop view. Whenever a user uploads an image, I am required to save 7 versions of that i ...

phphtmljquerycsslaravel

The page layout is completely messed up due to the floating right button

In my jQuery v3.3.1 / Bootstrap v4.1.2 application, I am attempting to add a button at the top right of the page. Please visit for credentials [email protected] 111111 The code I am using is as follows: <section class="card-body content_block_ad ...

htmlbootstrap-4

Display MQTT information on a Django template

I've been utilizing paho-MQTT successfully to receive messages. However, I'm facing a challenge in displaying the received data in a template. Below is an excerpt of my code: import paho.mqtt.client as mqtt import json def on_connect(client, use ...

pythonhtmldjangomqttmessagebroker

Tips for maintaining sequential numbering in Mediawiki sections

Looking to enhance the formatting of numbered lists by adding section headers and restarting numbering? The old Mediawiki format supported this, but it no longer works in version 1.24. For example: ==First Header2== # # ==Second Header2== # Desired output ...

cssheadermediawikiindentationnumbered-list

Exploring ways to integrate Javascript and CSS into a Bootstrap lightbox modal dialog?

Can someone help me figure out how to use the bootstrap lightbox to display a form with specific CSS style and JavaScript code for the form? I'm having some trouble implementing it. I specifically need this setup because I am using Selectize.JS to cr ...

javascriptjquerycsstwitter-bootstraplightbox

CSS3 Background-size Inquiry

Is there a way to stop the resizing of my background image using CSS? Currently, I have the background-size property set to 100%, but I would like it to remain at that size once the div reaches a minimum height of 800px. Any suggestions on how to achieve t ...

css

Using Selenium in Python, loop through webpages to extract the search result position

Currently, I am using a script to search for a generic keyword and determine the rank of my products on an e-commerce platform. The code below has been working successfully in fetching the product ranks on the first page. from selenium import webdriver dr ...

pythonhtmlselenium

How can jQuery be used to adjust the width and height of an iframe?

After researching a solution on a website, I attempted to implement it but encountered issues. It seems like there may be another script dictating the styling, so I need to add some code directly to the page to override it. This is what I tried: <scri ...

jquerycssiframe

Having trouble displaying nested routes in Angular within the view

I'm encountering some issues with child/nested routes in Angular 4. In the app.module.ts file, my imports statement looks like this: RouterModule.forRoot([ { path: 'templates', component: TemplateLandingC ...

htmlangulartypescriptsingle-page-applicationangular-router