CODEWITHSUNDEEP
css
peka
peka

Reputation: 61

How to add line break in CSS

I am using 3rd party application which allows custom CSS to adjust a certain setting. Here is the data extracted from Chrome

<textarea readonly="readonly" 
disabled="disabled" 
class="cComment TextEntry" 
id="C050590L" 
name="@C050590L" 
type="Text" maxlength="4000" 
rows="12" 
style="width:100%">2020-01-30: On x710 Controller types, 1GbE is not supported with DAC Cable. You can ONLY get 1GbE support with Optical cable/ 1G Transceiver.*  2020-02-13: On X710 Controller types, the link capabilities and autoneg are inconsistent on different firmware releases. 
The changes that were made between various FW versions are confidential and cannot be shared externally but the output you see is on your particular FW is what should be considered appropriate.*  2018-02-07: On xl710 controllers, the BOOTUTIL will display 40GbE under Series. This is correct since this chip splits the signal to 4x10GbE.*  2020-01-28: We have confirmation from Intel that LLDP on FW 7.0 should stay persistent once disabled (even after the reboot). For this, we need the latest Intel driver (24.5 or later).*
</textarea>

What I am looking to do in my custom css (cComment) is to start a new row after each date mentioned from the Style. Is this possible to figure out based on the code provided here?

.cComment {
    text-transform: uppercase;
    color: red;
    }

Upvotes: 0

Views: 206

Answers (2)

Gyan Prakash
Gyan Prakash

Reputation: 121

You can't add css directly to different parts of the content of given HTML element, without modifying your HTML content. White spaces can be added in four ways:

  1. Putting <br/> tags in the content, wherever required.
  2. Using display property: A block-level element starts on a new line, You will need to put the content in a separate HTML element(eg. div) you want to start from the next line.
  3. Using "white-space: pre", it can be used to preserve whitespaces and display exactly the way you have written your content in the HTML tag with line breaks.
  4. Using tag for the content you always want to start from a new line, since divs are block-line elements.

For all these above-written ways, you will need to have access to your HTML content, as it requires some modification to bring the lines starting from the date to a new line.

Upvotes: 2

EulersIdentity
EulersIdentity

Reputation: 87

CSS would not deal with adding line breaks inside of text content, and you can use JavaScript to do something like:

let textboxElement = document.querySelector('#C050590L');

let result = textboxElement.value.replace(/(\d+-\d+-\d+:?\s+?)/g, '\n\n$1\n\n');

result = result.replace(/^\n*/, '');

textboxElement.value = result;
<textarea readonly="readonly" disabled="disabled" class="cComment TextEntry" id="C050590L" name="@C050590L" type="Text" maxlength="4000" rows="12" style="width:100%">2020-01-30: On x710 Controller types, 1GbE is not supported with DAC Cable. You can ONLY get 1GbE support with Optical cable/ 1G Transceiver.*  2020-02-13: On X710 Controller types, the link capabilities and autoneg are inconsistent on different firmware releases. 
The changes that were made between various FW versions are confidential and cannot be shared externally but the output you see is on your particular FW is what should be considered appropriate.*  2018-02-07: On xl710 controllers, the BOOTUTIL will display 40GbE under Series. This is correct since this chip splits the signal to 4x10GbE.*  2020-01-28: We have confirmation from Intel that LLDP on FW 7.0 should stay persistent once disabled (even after the reboot). For this, we need the latest Intel driver (24.5 or later).*
</textarea>

Upvotes: 1

Related Questions