I have a CSV spreadsheet with data that looks like this:
<p>Features:• first feature• second feature• third feature• fourth feature• and so on (the total number of features is variable)</p>I want each feature to display on a new line without adding any HTML tags, like this:
Features:
• first feature
• second feature
• third feature
• fourth feature
• and so on (the total number of features is variable)
Is it possible to achieve this using CSS ?!
(javascript allowed)
Thank you.
In my view, the optimal solution would require a server-side script to parse and modify the structure of your markup. With the current structure, relying solely on CSS will not suffice to achieve the desired outcome.
Alternatively, if using JavaScript is acceptable, you could implement a simple replace function after inserting the paragraph:
Illustration http://codepen.io/anon/pen/qoCGI
var par = document.getElementsByTagName('p')[0];
par.innerHTML = par.innerHTML.replace(/•/g, "<br />•"); If there are other unknown characters that need identification, it is recommended to utilize a secure range of Unicode sequences, such as:
par.innerHTML = par.innerHTML.replace(/[\u017C-\uFFFF]+/g, "<br />•"); Outcome
Unfortunately, using only CSS makes it tricky to achieve this effect. Many experts suggest utilizing <li> elements instead, as they are specifically designed for lists.
If you're adamant about sticking to CSS, one potential workaround is:
<style>
p {
white-space: pre;
}
</style>
<p>Notable characteristics:
• initial point
• secondary point
• tertiary point
• quaternary point
• and so forth (the total number of features can fluctuate)
</p>
CSS is a style sheet that controls the visual appearance of elements on a webpage. HTML is a markup language used to structure and define the content on a webpage.
While they share similarities, it is important to keep CSS and HTML separate. It appears that you are looking to modify how content is displayed on the page, such as organizing content into lists or adjusting line breaks. This can be achieved in HTML using various tags like <h#> for headings, <br> for line breaks, <p> for paragraphs, and list elements <ol> / <ul> with their corresponding container tags <li>
In this scenario, it seems like you want to format a list, so it would be best practice to use list tags:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I'm experiencing an issue with my navbar and its drop-down menus. When I hover over the submenu, it doesn't stay visible as expected. I've tried different approaches such as using jQuery, the + operator in CSS, and even creating a separate h ...
Is there a more efficient way to update an existing element in an array without fetching the database multiple times? If you have any suggestions, I would greatly appreciate it. Thank you! const updateStock = async (symbol, webApiData) => { try { ...
I have a list of links in my navigation. I want the current page's link to be highlighted, as well as the parent page's link one level up. For example: All pages: /blog, blog/careers, blog/authors Page: /blog/author Highlight: /blog/author, /blo ...
If my URL follows this structure: /blog/[post_id]/something What's the best practice for passing $post_id to any component within the tree? I'm familiar with retrieving route parameters using getInitialProps, but I struggle with passing values ...
some.JS.Code; //ignore this line from linting etc. ##Software will do some stuff here, but for JS it's an Error## hereGoesJs(); Is there a way to prevent a specific line from being considered during linting and formatting in Visual Studio Code? I h ...
I am currently working with Ionic 3.20 and Angular 5.2.9, encountering an issue with content refreshing after a model change. Despite being new to this, I sense that I might be overlooking something fundamental. Within my view, I have the following elemen ...
I am facing an issue with a multiple select input in Internet Explorer 9. The options are not utilizing the full width of the select box, despite having a min-width set on the select element. In Chrome and Firefox, the items fill up the available width pe ...
Recently, I was requested to lend a hand with a certain website: www.backincontrolbook.com Interestingly, when viewed on a PC browser, everything appears as intended. However, switching over to a mobile device (iPad and iPhone specifically), the header de ...
https://i.stack.imgur.com/4LEQ4.png https://i.stack.imgur.com/3sxzF.png Is there a configuration missing in Angular 14? When I try using <img [src]="assets/images/sidebarNav"> with ./, ../, it doesn't work. I have followed the instr ...
I am attempting to modify the classes of multiple sibling elements when a click event occurs. Some of these elements may have multiple classes, but I always want to change the first class. Below is the code that I created: let classList = event.currentTa ...
At times, I delve into JavaScript code on MDN and come across some confusing syntax like [, thisArg]... for instance, arr.map(callback(currentValue[, index[, array]])[, thisArg]) In this scenario, I am aware that a callback function is required. But what ...
I am currently developing a unique Express Node.js application that utilizes the extraordinary capabilities of this remarkable Facebook SDK. Allow me to present my existing route for the root: app.get('/', Facebook.loginRequired(), function (req ...
While working with NestJS and IIS, I encountered an issue when deploying my 'dist' folder on the server using IISNode. The error message 'module not found @nestjs/core' prompted me to install the entire 'package.json' files (n ...
Currently, I am facing the challenge of incorporating Selenium code into my F# project while utilizing the canopy wrapper. Canopy relies on Selenium for certain functions. My main struggle lies in converting Selenium code from Java or C# to fit within an ...
Right below, you'll find a textbox that has been generated using this code snippet: $('#txtWeight').each( function() { var $this = $(this); var $weightText = $("<input type='text' class='txtWeightRow' maxle ...
In my code, I am calling the function SigWebRefresh at specific intervals of 50 milliseconds. tmr = setInterval(SigWebRefresh, 50); The function SigWebRefresh utilizes XMLHTTPRequest: function SigWebRefresh(){ xhr2 = new XMLHttpRequest(); ...
I've been working on developing the backend for a wishlist feature, but I've encountered an issue with my code. (node:19677) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'find' of undefined Despite trying to redefi ...
Encountering an error where WebForm_DoCallback is undefined. UPDATE WebForm_DoCallback("AccountPageControl1", "FileSave~" + fileName, CVFileSavedServerResponse, null, null, true); function CVFileSavedServerResponse(param, context) { } Why isn't ...
I am facing an issue regarding an unexpected character in a node module file. Below is the content of my next.config.js file: /** * @type {import('next').NextConfig} */ const UglifyJsPlugin = require("uglifyjs-webpack-p ...
I'm currently in the process of developing an application using Vue.js along with Chartjs. A persistent issue I am facing involves making an http call to a service, fetching data, parsing it, and then passing it into my Chartjs component. The problem ...