Is there a way to adjust the width of specific paragraph elements so they automatically have two lines with the same width?
Even when the text is longer, the width should adjust to ensure both lines are equal in length (with the last line not wider than the first).
I attempted fixing the width using CSS, but it only works if the text is the same...
Any suggestions for a jQuery plugin or existing code that can achieve this?
Here is my suggestion.
To create a line break, I recommend inserting a <br> tag in the text.
The ideal placement for the <br> tag would be right after the middle of the content. This ensures that the second line will always be shorter than the first one.
Below is a basic example which you can customize further:
var textElement = $('p');
textElement.each(function(){
var text = $(this).text();
var length = text.length;
for(var i =(Math.ceil(length/2)); i<length; i++){
if(text[i]===' '){
var text2 = text.slice(0, i) + "<br>" + text.slice(i);
$(this).html(text2);
break;
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lectus ac
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lectus ac elit vestibulum ultricies eget sit amet lacus. Lorem ipsum dolor sit amet.
</p>I am struggling to align items on mobile resolution in a specific order: Image Content Image2 Content2 I have created a pen showcasing this issue on Codepen. Initially, I attempted using transform: translate, but it only worked for the content. The ...
I have 3 "p" elements and I'm trying to find a way to change the order in which they load on the page using JS or CSS. Below is an example of what I've attempted so far. When you click on the first box labeled "about 1," it opens up and displays ...
has really intrigued me and I'm eager to create something similar because it seems like a fun project. However, I am unsure of what this particular style or technique is called. Any pointers on where to find a tutorial or the name of the approach woul ...
Exploring the world of Ruby on Rails and HTML has been quite an adventure. Today's question veers away from RoR and focuses on HTML and CSS. As I attempt to center my body, a peculiar issue arises: Help me solve this problem here How can I align the ...
Check out my website at kylesethgray.com. I've created a 'somewhat responsive design', but there are two issues that need fixing: Whenever I have a list, whether it's an <ul> or <ol>, the bullets get cut off when the bro ...
In my work with CodeIgniter, I have a controller that sends me various vacancies to display in a view. The dynamic code in the view is structured like this: <div class="row vacancy-grid"> <?php foreach ($vacancies as $vacancy) { ?> ...
I'm attempting to create an expand and collapse animation effect on a card without relying on bootstrap or any external libraries. I have tried adding a transition property but it doesn't seem to work when the button is clicked. Here is the comp ...
I am working on optimizing my result pages for mobile devices to ensure they are responsive across all screen sizes. However, I am struggling with making the scrollable panel fill the screen down to the footer consistently on all mobile devices. Setting a ...
I’ve been experimenting with various code snippets in an attempt to reach my objective, but so far I haven’t found a solution. Objective: My goal is to retrieve a JSON array of objects from a specific web URL using the GET method. This task needs to b ...
Check out this JSFiddle for the code: $(document).ready(function(){ $( ".keywordsdiv" ).each(function(){ $(this).children(".keywords").eq(3).after('<a href="" id="playtrailershowmorebuttons">....Show More</a>');//add a uniq ...
I'm encountering alignment issues with a large form that I'm working on. I have two columns at the beginning of the form where some rows occupy half of the width while others take up the full width. However, the problem arises with the alignment ...
I'm looking to create a timer countdown that is set to a specific date and time, such as June 1st at midnight. The code should display the remaining time until that date or time. ...
I am looking to develop a dynamic div using jQuery and AngularJS that can change its background on the fly. My goal is to have the ability to open a JQuery UI Dialog window by clicking on the text within the background, allowing me to choose a new backgro ...
Is there a way to keep the data in listbox2 after submitting the form? Currently, when I submit the form, I lose the data in listbox2 and have to reselect everything again. <form:form action="choseElement" method="post"> <select name="listbox1 ...
I am currently developing a Browser Helper Object (BHO) for Internet Explorer that involves searching for specific words on a web page and encasing those words in an HTML tag for styling purposes. While I have code in place that allows me to change the st ...
Is there a way to completely remove the elevation of a v-dialog so that it has no shadow at all? The elevation property in the v-dialog itself and using the class as Class = "elevation-0" have not worked for me. Here is the link to the component ...
A problem I encountered with my website involves a menu that toggles content visibility based on menu item clicks. The JQuery script responsible for this behavior is shown below: $(document).ready(function() { $("#bioLink").click(function(){ $ ...
I have a situation where an ASP.NET MVC call to a method via AJAX is throwing an exception error. I want the exception message to be sent back to the client without having to catch the exception explicitly. Here's what I'm trying to achieve: [Ht ...
Just starting out with JQuery here. I'm working on a search form that has 16 fields, most of which are textboxes and the rest are dropdowns. Underneath these fields, I have 3 radio buttons. When the first one is selected, certain fields in the form s ...
Let's analyze the code below: $(document).ready(function () { $('#dropdownMenu1').attr('aria-expanded', true); $('.dropdown').addClass('open'); $('#dropdownMenu1').on('hide.bs.dropdow ...