What is the best way to change a dynamically centered text alignment?

Question

What is the best way to change a dynamically centered text alignment?

Is it possible to add a transition for a center-aligned text that changes due to an action? (codepen)

HTML :

<div id="container">Lorem ipsum dolor sit amet consectetur adipiscing elit</div>

CSS :

#container {
  width: 400px;
  height: 20px;
  background: #000;
  color: white;
  text-align: center;
}

(The codepen example demonstrates dynamic data, in my case, the data is changed by React states)

EDIT: Only the last part of the text changes, e.g.

Lorem ipsum dolor sit amet consectetur adipiscing elit

changes to Lorem ipsum dolor .... I want to display the shortened text moving to the center from the left (since the remaining text will be on the left side when cut off).

jquery html css reactjs

Answer 1

Answer №1

Here is an example

$("#box div").hover(function() {
  this.innerHTML = "This is a demonstration of dynamic text This is a demonstration of dynamic text This is a demonstration of dynamic text This is a demonstration of dynamic text This is a demonstration of dynamic text This is a demonstration of dynamic text This is a demonstration of dynamic text";
}, function() {
  this.innerHTML = "This is some sample dynamic text that doesn't do much This is some sample dynamic text that doesn't do much This is some sample dynamic text that doesn't do much";
});

#box {
  height: 20px;
  background: #000;
  color: white !important;
  text-align: center;
}
#box div {
  width: 400px;
  white-space: nowrap;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  transition: all ease-in-out .9s;
}
#box div:hover {
  width: 100%;
  max-width: 100%;
  white-space: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box">
  <div>This is a demo of dynamic text that doesn't do much This is a demo of dynamic text that doesn't do much This is a demo of dynamic text that doesn't do much</div>
</div>

Answer 2

Here is an example

$("#box div").hover(function() {
  this.innerHTML = "This is a demonstration of dynamic text This is a demonstration of dynamic text This is a demonstration of dynamic text This is a demonstration of dynamic text This is a demonstration of dynamic text This is a demonstration of dynamic text This is a demonstration of dynamic text";
}, function() {
  this.innerHTML = "This is some sample dynamic text that doesn't do much This is some sample dynamic text that doesn't do much This is some sample dynamic text that doesn't do much";
});

#box {
  height: 20px;
  background: #000;
  color: white !important;
  text-align: center;
}
#box div {
  width: 400px;
  white-space: nowrap;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  transition: all ease-in-out .9s;
}
#box div:hover {
  width: 100%;
  max-width: 100%;
  white-space: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box">
  <div>This is a demo of dynamic text that doesn't do much This is a demo of dynamic text that doesn't do much This is a demo of dynamic text that doesn't do much</div>
</div>

Answer 3

Answer №2

#wrapper:after{
   content:'this is ever-changing';
}

otherwise, in jQuery:

document.getElementById("wrapper").innerHTML = "Text modified!"

Answer 4

#wrapper:after{
   content:'this is ever-changing';
}

otherwise, in jQuery:

document.getElementById("wrapper").innerHTML = "Text modified!"

Answer 5

Answer №3

Experience a seamless transition effect using just CSS. There are endless possibilities for creating various effects without the need for JavaScript.

#container {
  width: 100%;
  height: 20px;
  background: #000;
  color: white;
  position: relative;
}
#container:hover > .static {
  top: -20px;
}
#container:hover > .dynamic {
  top: 0px;
}
#container .static {
  top: 0px;
}
#container .dynamic {
  top: 20px;
}
#container > div {
  position: absolute;
  left: auto;
  right: auto;
  width: 100%;
  text-align: center;
  transition: all 0.3s linear;
  overflow-y: hidden;
}

<div id="container">
  <div class="static">This is an example of dynamic text that remains static</div>
  <div class="dynamic">This is an example of dynamic text that changes</div>
</div>

Answer 6

Experience a seamless transition effect using just CSS. There are endless possibilities for creating various effects without the need for JavaScript.

#container {
  width: 100%;
  height: 20px;
  background: #000;
  color: white;
  position: relative;
}
#container:hover > .static {
  top: -20px;
}
#container:hover > .dynamic {
  top: 0px;
}
#container .static {
  top: 0px;
}
#container .dynamic {
  top: 20px;
}
#container > div {
  position: absolute;
  left: auto;
  right: auto;
  width: 100%;
  text-align: center;
  transition: all 0.3s linear;
  overflow-y: hidden;
}

<div id="container">
  <div class="static">This is an example of dynamic text that remains static</div>
  <div class="dynamic">This is an example of dynamic text that changes</div>
</div>

What is the best way to change a dynamically centered text alignment?

Answer №1

Answer №2

Answer №3

Similar questions

Creating a popup window using HTML

Personalize the drop area in Filepond

What is the process for deploying a React project located in a subdirectory of the main branch to Github Pages?

Implement a Selection Feature in Angular

Clickable Material UI tabs that can be moved around easily

JSP form continues to submit despite JavaScript validation returning false

Within NextJS, the content may not immediately appear on the webpage, however, if the information is logged in the console, it will be

Display or conceal a div element depending on the value of a row in a MySQL

MUI Autocomplete refuses to accept a value

How can you modify the starting point of data in jQuery flot?

Struggling to center a modal at the exact middle of the page using Bootstrap 5

Using the jQuery AJAX function to modify the URL query string

Find the position of an HTML5 canvas element within a webpage

Customizing hyperlink styles with JavaScript on click

How can we determine the dimensions of an absolutely positioned element within a relatively positioned element?

JavaScript - AngularJS HTML parser

Using cascading style sheets to switch a page into editing mode

Using PHP header function to redirect to a specific form on an HTML page: A step-by-step guide

What is the best way to enable a disabled MUI MenuItem within a table that is being mapped, based on a specific item in the

What is the reason file inputs do not trigger 'input' events, while 'change' events do fire?