0

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;
    }
Improve this question
4
  • Don't you have Javascript on your app when getting the content? You can use CSS function str-replace() to replace part of string where you could add some new lines after each date, but this would require a regular expression to catch the dates. It would be way easier to add the new line with Javascript codes Commented Mar 8, 2020 at 2:14
  • Unfortunately, I do not have access to write any Javascript. My only option is to use css for customization. I am not sure if there is a way to tell css to look for certain characters (like "*" for example) and add line break afterward? Commented Mar 8, 2020 at 2:22
  • Oh so on your content pattern there will always be a *, that could help Commented Mar 8, 2020 at 2:42
  • Yes... That is an option to add "*" at the end or anything else that could be a trigger Commented Mar 8, 2020 at 4:02

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you for the info... I was hoping there is a way to add something (like a special character) at the end of the text and before the date that would be a trigger. In my case above, I was playing with the idea to have "*" to be the trigger and was hoping that CSS could potentially be able to handle it
There is no way to modify the text with CSS only, But If you the access to the content then just adding "<br />" at the end of the text and before the date can solve your problem.
1

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>

Improve this answer

2 Comments

Thank you for the info. The Result with JavaScrip you have here is exactly what I am looking for but unfortunately, I do not have access to write it to application. I was hoping that there is a way to accomplish this in CSS since I do have access to that. I will check with the developer if this is something that they could do within the application. If anyone else knows that there is any other way from withing the CSS, please let me know.
there are some ways to "hack it" if you just need it on your computer. You can use a bookmarklet to get the elements on the page and do things with JS... in the old days there was greasemonkey on Firefox or we can in general write some add-on or plugin for browsers to do things or tweak things we want too

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.