Line 1: Position a section of the content on the initial line.Line 2: Then place the remainder

Within a paragraph element on WordPress, I have a value displayed using ACF.

The paragraph is contained within a div with a maximum width and centered text alignment.

I am seeking a solution that will allow me to achieve the following:

"If the default display of the text is on one line: 70% of the text will be displayed on the first line, while the remaining 30% will be shown on the second line."

For example: With the desired solution (which I do not currently possess):

This approach would help prevent having only one or two words on a second line.

Please let me know if this explanation is unclear :)

Answer №1

To create a flexible text area, you could set the width of the paragraph to 70% and add margins to achieve a 30% margin leaving a 70% text area. If you prefer an extendable text option, using a textarea might be more suitable.

#textcenter{
background-color:grey;
height:200px;
}


#textcenter p{
padding-top: 45px;
font-size:16pt;
text-align:center;
color:white;
margin:0 15%; /*15% left and right - 30% margin = 70% text area*/
}

#textcenter textarea{
position:relative;
text-align:center;
color:grey;
width:70%;
margin:0 15%;
}
<div id="textcenter">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut.</p> 
<br>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut.<!--editable--></textarea> 
</div>

Answer №2

In place of max-width:70%;, consider using width: 70% and margin: 0 auto; to center your text.

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

Storing an image in MongoDB using Multer as a file from Angular is not working as anticipated

I'm currently dealing with an issue that I believe is not functioning correctly. I installed a library in Angular called cropper.js from https://github.com/matheusdavidson/angular-cropperjs. The frontend code provided by the developer utilizes this li ...

Tips for implementing a waiting period during an ajax request using jQuery

My current task involves calling a URL to generate a token and then opening another page on the same site once the token is generated. The issue I'm facing is that the window generating the token closes quickly, making it difficult for me to authentic ...

Altering the submit button's value following the submission of a form

My goal is to create a form with a submit button that, when clicked, will insert the value of the button into a database and change the text on the button to inserted. If the insertion violates any constraints, then the text on the button should be changed ...

Switch Image to Background Image on Mobile Devices

I am currently working on a website that needs a special page for an upcoming event. Typically, the pages on this site have a mast banner image that stretches across the full width of the page. However, for this particular page, it is necessary for the ima ...

Error: The function `push` cannot be used on the variable `result` (TypeError)

Here is a snippet from my react component const mockFetch = () => Promise.resolve({ json: () => new Promise((resolve) => setTimeout(() => resolve({ student1: { studentName: 'student1' }, student2: { studen ...

Which is better: Starting with rows or columns in Bootstrap 4 layout design?

Many Bootstrap 4 grid layout demos feature columns within rows, but is it considered improper to have rows within columns? For example: <div class="col col-md-6"> <div class="row"> </div> </div> ...

Creating custom styles in SCSS using the pseudo-element :after and targeting a specific class with the ampersand symbol

I am trying to add a transition effect to the element with an applied active class. My goal is to avoid duplicating my SCSS code (even though I understand it will be duplicated in the compiled CSS). The sole purpose of the active class is to modify the b ...

Sending a Compressed File to Server Using AJAX

I've successfully created a php file that takes a zip file, unpacks it, and places it at the specified path on my server. While it works perfectly with a standard form that calls the php file in the action, I've been struggling to make it work w ...

Avoid receiving input for a button that is being covered by another button

I am currently developing an Idle Game and I am looking to include 'buy buttons' for purchasing buildings, along with a sell button embedded within the buy button. Just as a heads up, these buttons are represented by DIVs acting as buttons. Here ...

"Experience random updates in the priv/static/js/app.js file whenever changes are made to Vue files in the Phoenix/Elixir/V

I have a vue.js/Phoenix application and I am currently facing a challenge with configuring the frontend assets properly. I have noticed that my priv/static/js/app.js file keeps updating whenever I make changes in other files, and I am unable to understand ...

How to Retrieve Component HTML Output in Vue beyond the Template Tag?

Is there a way to access the output of a component, such as ComponentName, outside of the template in Vue.js? For example, in data, methods, or during the mounted lifecycle hook. For instance, consider a Vue file named components/Test.vue: <template&g ...

Checking the availability of a username by sending an Ajax request every time the user types it may lead to inefficiencies and slower response times. Are there

I have developed a NodeJS authentication application. In this scenario, when a user enters a username, the system will display "username taken" if it is already in use, otherwise it will show "username available". I am interested in understanding the lim ...

What is the best way to send an ID through a URL to a PHP file using an AJAX request

I have been struggling to pass an ID using AJAX to a PHP file. Despite my efforts, I haven't been successful in achieving this. I need assistance in returning to the page with the specified ID. Can someone please help me? Here is the approach I attem ...

Issue: Generated fewer hooks than anticipated. This situation could be a result of an unintentional premature return statement

view image description see image here I encountered an issue while trying to retrieve a specific item from my customer list on the first attempt. The strange behavior occurs when I search for a name not present in the table, then search for an existing en ...

Is there a way to personalize the design of a React component used across multiple lazy-loaded pages?

In the process of developing a React application, I decided to utilize CRA and configured the app's routes with React Router. The components for the pages are being lazy-loaded. Currently, there exist 2 pages within the application: Home and About. . ...

Issue with Resizing: Custom Icons Drifting from Right Side of Header

My header is a bit messy. I wanted it to be based on the full-width image without changing its height. To achieve this, I floated the header image to the left and created a div that filled in the color of the image across the entire page. After that, I add ...

Exploring Hammerjs for implementing pinch-to-zoom functionality on images

Having trouble implementing pinch and zoom functionality on an image within a header on tablet view. Despite researching similar issues, I'm still learning and struggling to pinpoint the problem. <div class="header"> <h1><img src ...

Can you explain the purpose of including text-rendering: optimizeLegibility in a CSS stylesheet?

Can you explain the significance of setting text-rendering to optimizeLegibility in a CSS file? For example, like this: html { text-rendering: optimizeLegibility; } ...

Problem with the "seconds" not being displayed for editing in the date range time selector

When using a date time range picker, I noticed that there is a field to edit "seconds" when editing the date (refer to link 1). However, when I switch to a date range picker, this option to edit seconds is not available (refer to link 2). Can you help me u ...

Guide on creating and dynamically appending an element to the DOM in VueJS triggered by a user clicking a button

I'm having an issue with my vue webapp. I want to make a square shape appear on the screen where a user clicks, but for some reason, my code isn't working as intended. Can someone help me figure out what's wrong? <template> <di ...