While utilizing text-align: center, I noticed that the remainder remains at the end. Here is how it currently looks:
https://i.sstatic.net/DjQU4.png
However, I am seeking to achieve this effect where the remainder remains at the start:
https://i.sstatic.net/iyHgj.png
Any suggestions on how to make this happen?
Hello, fastq123:
Check out this code snippet I created based on your request. Please keep in mind that you'll need vanilla JavaScript or jQuery to accomplish this task. I opted for jQuery for speed, but either method will work. I hope this code is useful for you. Happy coding!
// Get the DOM element P and store it in a variable
p = document.getElementById("paragraph");
// Store the text content of p in another variable
let strParagraph = p.innerHTML;
// Convert the text into an array
let strArray = strParagraph.split(" ");
// Get the last element in the array
let last_element = strArray[strArray.length - 1];.reverse {
text-align:center;
width:420px;
}
.reverse {
position: absolute;
left: 93px;
top: 21px;
width: 65%;
height:60%;
display: table;
}
.reverse p {
display: table-cell;
vertical-align: middle;
text-align: justify;
}
.reverse p::first-line {
text-align: center;
}<div class="reverse">
<p id="paragraph">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.lorem ipsum lorem ipsum.
</p></div>UPDATE START***** This question is unique and not a duplicate. Here is my revised code snippet: I am able to retrieve innerHTML but facing an issue with copying it. Can someone help me test this on jsFiddler? Here's the HTML code: <div id="mydiv ...
My issue lies in the fact that the code snippet below only triggers the pop-up box for the first delete button selected. Subsequent buttons do not respond. How can I adjust it so that any delete button clicked will activate the script? <a class="btn bt ...
I’ve attempted the following so far: import "./styles.css"; import { Box, Typography } from "@mui/material"; import styled from "@emotion/styled"; export default function App() { const MainStyle = styled("div")(( ...
Having trouble with the Twitter Bootstrap CSS causing my animation to open with a fade and immediately close. Not sure why this is happening, can anyone provide assistance? Update: Turns out, the bootstrap.css file already has Modals implemented. Using bo ...
The HTML code snippet below incorporates Three.js for creating a 3D scene and rendering it with CSS. It includes two separate HTML files: index.html and moo.html. <!doctype html> <html lang="en> <body> <script src="js/Three.js">&l ...
I'm struggling to understand this, as I am not very well-versed in CSS. I would consider myself more of a beginner than an expert. The reason why I am using relative/absolute is because I am working with dynamically paginated tables from large datase ...
I am looking to optimize the layout for various screen resolutions and ensure compatibility with the latest versions of IE, Firefox, and Chrome. https://i.sstatic.net/3OLh0.jpg ...
I have a Javascript code where I can navigate a table using the up, down, and enter keys. It works perfectly, but I want to enhance it by allowing the cursor to move left and right within the same row. Is there a way to achieve this? I attempted implement ...
I recently upgraded my product from Angular 1.2.x to 1.4.x. Since updating to angularjs 1.4.x, I've encountered an issue: What I have: I included code snippets for both angular 1.2.0 and 1.4.8. You can check out the comparison on JSFIDDLE. Explanat ...
I've been examining the source code of a PHP website, but I'm finding that all pages have a similar format with unreadable PHP and HTML codes encapsulated within PHP tags. How can I reverse engineer this to understand how it gets translated into ...
Is there a way to configure an asp.net page to only display once? I want to ensure that if a user logs in again, they won't see the page again. ...
While many solutions exist on Stack Overflow for making columns equal height based on the largest content, I am specifically interested in making all columns equal height based on the smallest column. https://i.sstatic.net/Xlcyh.png In this scenario, my ...
I have a vision for an animation where, upon hovering over an icon, it enlarges, increases in opacity, and reveals some accompanying text. The visual effect I am aiming for involves two lines of color expanding horizontally from the center outwards before ...
Encountered an issue with my Python code that is responsible for downloading data from a table on a web page and saving it to a local CSV file. The error message suggests an unknown error occurred during processing. See below for more details. Error Messa ...
I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...
Struggling with a CSS menu that I'm developing. Despite applying the display:inline-block to all elements, the menu items continue to display vertically rather than inline. Any tips on how to resolve this issue? View the code here: http://jsfiddle.net ...
As I work on localization implementation, I encounter an issue with the directionality of mixed characters on the page. The text content is stored in a json file and inserted into the DOM using a Vue.js template. While individual characters display corre ...
I recently launched a basic Node.js website but encountered an unusual issue. When trying to style the body using the default style.css stylesheet provided by Express, I found that it was not recognizing it. The only workaround was to add the class body di ...
Is there a way to eliminate the odd white space between two nested divs in Chrome? <div class="bar"> <div class="progress"> </div> </div> .bar { width: 200px; height: 6px; border: 1px solid black; ...
After learning about VueJs, I decided to embark on a small project - a nutrition app where food recommendations are made based on specific nutrients. Below is the JavaScript code snippet: recommendFood: function() { this.recs = {}; ...