Tips on adjusting the color and alignment of a wrapped text using CSS

Is there a way to change the color and alignment of a wrapped line of text? I have a div with content, and when the text wraps due to lack of space, I'd like the second line to be right-aligned and green in color.

I've created a simple fiddle. I need the second line to be both right-aligned and have its color changed.

CSS:

.heading {
    font-size: 40px;
        &:first-line {
            color: red;
        }
 }

HTML:

<div class="heading">
    This is just a test to see how text wrapping works in multiple lines. Testing some things out.
</div>

Link to the Fiddle

Thank you!

Answer №1

If you find yourself limited by CSS selectors that only allow for the first line to be selected, fear not! There is a wonderful library called lining.js that can help you achieve the desired result. Take a look at the code snippet below which should address your issue.

HTML:

<div class="heading" data-lining>
   this is a test for wrapping text in multiple lines. This is some additional text to demonstrate the wrapping effect.
</div>
<script src="https://cdn.rawgit.com/zmmbreeze/lining.js/7077712b/build/lining.min.js"></script>

SCSS:

.heading {
     font-size: 40px;
     .line:nth-of-type(2) {
         color:green;
         text-align:right;
       }
  }

https://jsfiddle.net/6rLno8ht/95/

I hope this solution proves helpful to you!

Answer №2

Give this a shot:

.title{
  font-size: 40px;
  color:green;
  text-align-last:right;
}

.title:first-line{
  color:initial;
}
<div class="title">
   This is an example of wrapping text on multiple lines. Testing.
</div>

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

Preventing the <img> element from being selectable and draggable simultaneously is effective in Firefox, but not in Chrome or Opera

I have a picture that I want to render both unselectable and undraggable. (This is not an attempt to prevent users from copying) To accomplish this, I can: Add a .noselect class to the <img> tag. As recommended here. Disable pointer-events. (I am ...

What is the best way to position a button on the right side of the page, ensuring that all text

I need help aligning my button (JSX component) to the right side while ensuring that all text remains on a single line. I am working with next.js and tailwindcss, and the button includes plain text as well as a react-icon. These components are all wrapped ...

What is the best way to adjust the vertical margin in a vis.js timeline?

The vis.js timeline sets a margin of 5px in each row using inline styles that are controlled programmatically by the library. The height, top position, and transform of each item within the row are specified by the library as well. Attempting to manually ...

Improving alignment and spacing in Bootstrap 4 grids and columns

As a newcomer to Stack Overflow and Bootstrap, I am encountering issues with using two columns of size 2 and 10. When implemented, they overlap each other; however, adjusting them to sizes 3 and 9 results in too much space between them. I attempted to fin ...

An impressive animation feature when presenting

I'm working on a code where I need to implement a small animation in JavaScript for displaying an element with a delay after a certain function. Here's what I have so far: function OpenPanelEdit() { const element = document.getElementsByClass ...

Creating a large and spacious modal in Angular using ngx-bootstrap

I need help with resizing the ngx-modal to cover a large area of the screen. Currently, I am trying to make it so that when something is clicked, the modal should overlay an 80% width grid on a full desktop screen. Despite my attempts at using .modal-xl an ...

Graphics vanishing during printing on document

Partaking in the Daily UI challenge to enhance my skills, but have encountered a hurdle. After entering numbers into the Card Number field, it appears to be replacing the images I uploaded. There might be something glaringly obvious that I'm missing ...

What is the method for adjusting the size of text while rendering on a canvas?

When it comes to scaling text with CSS transform scale, for instance: transform: scale(2, 4); fontSize: 20px // Is including fontSize necessary? I also have the task of displaying the same text on a canvas element. function draw() { const ctx = document ...

Modifying the header on an HTML page

Looking for assistance with code to have my site header appear after the page has scrolled past Figure 1 and change on reaching Figure 2. Any suggestions on how I should write this code? Your help is greatly appreciated! ...

What could be causing the error? And is there a way to successfully append the child div to the parent div?

Here is the error message that I am encountering: Uncaught TypeError: Cannot read property 'appendChild' of null at HTMLButtonElement.<anonymous> Error is located at app.js on line 7 const flexContainer = document.querySelector(&apo ...

What are some ways to make the parent div grow based on the width, padding, margin, or box of the child div

Is it possible to expand a parent div with a child div and how can I achieve this? I have created a JSFiddle with some code included. CSS body { background: gray; } div.page { color: white; background: black; max-width: 72em; margin: ...

What is the method for ensuring that a badge is consistently in a circular shape?

My notification badge can change shape depending on the number inside it - sometimes it's a circle and other times an oval. Is there a way to ensure that it always appears as a circle? I am utilizing materialize CSS with the following HTML/CSS code: ...

What could be causing the background color opacity of the HTML hr tag to decrease?

I am trying to modify the height and background color of the <hr> HTML tag. However, even though the height and color are changing, it appears that the background color opacity is decreasing slightly. What could be causing this issue? Here is my cod ...

Choose the initial offspring of the next tier

How can I specifically target the first div with the class .tGrid-item inside the div .tGrid-row-two using Sass? The :first-child selector seems to be selecting the first t-Grid-item of each .tGrid-row-two, which is not what I want. I am utilizing Sass fo ...

Is it feasible to exclusively apply Twitter Bootstraps .navbar-fix-to-top on mobile devices?

I am working on a website using Twitter Bootstrap 3 and I have implemented the following navbar: <div class="col-xs-12 col-md-10 col-md-offset-1"> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> ...

The <link> element in the HTML file referring to the stylesheet {% static 'css/style.css' %} is not functioning properly

I am having trouble aligning text to the center in VS Code when linking CSS to HTML. The 'center-aliend' property doesn't seem to work for me. Can someone point out what I might be doing wrong? I am trying to position the text 'Hello St ...

Users using an iPhone are unable to adjust the scale or scroll on this website

I find myself wondering what I might be overlooking in this situation Here is the HTML code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../nImg/favicon.ico" ...

Combining a left div, a right div, and a center div to equal 100% width. What is the best

I currently have a main div and three additional divs contained within it: <div id="container" style="width:100%;"> <div id="left" style="width:201px; float:left;"> .... </div> <div id="centre" st ...

Alignment of input

        <section class="newsletter text-white text-center"> <div class="container"> <div class="row"> <div class="col-xl-9 mx-auto"> <h2 class="mb-4" ...

Create a website that is both reorderable, flexible, and resizable

I want to create a similar design using jquery/html/css. Can anyone provide an article or explanation on how to get started making something like this? ...