Hide sub-strings using CSS display property as none

Is it feasible in CSS alone to conceal certain text within a string? I am aware of attribute selectors such as:

[att^=val] - the "begins with" selector

For example, given this:

<div class="some_random_text">
    This is a default text
</div>

I want to hide only a specific substring - in this case "default". I know how to achieve this with JavaScript, but I am exploring if there is a CSS-only solution.

Although manipulating the DOM via CSS seems unlikely, which would be essential for something like:

this is a <span class="hideThis">default</span> text

why would you need this and where does it occur?

For instance in a CMS (in my case OXID). You can assign a title to a particular payment method. We have

  • paypal
  • paypal (provider1)
  • paypal (another person)

I only want PayPal to be visible on the frontend. The other PayPal payment types should remain as they are. Renaming them all to PayPal will just cause confusion.

There is the content property. Can it be managed somehow using that?

Once again, no JavaScript involved :-)

htmlcss

Answer №1

Regarding your inquiry - unfortunately, accomplishing this task using solely CSS is not feasible.

You have the following alternatives at your disposal:

  • Revise the HTML according to your proposal

this represents a <.span class="hideThis">default<.span > message

  • Employ JavaScript to modify the element's innerHTML content
  • Utilize a pre-processing language (like PHP or ASP, whichever you can work with) to shorten the string to a substring.

I apologize if this response does not meet your expectations, however, these are the available choices.

Answer №2

It is not possible to directly modify the inside text in HTML. The only way to do so is by using the content property in CSS. If there are changes in your DOM, you can apply rules like:

.some_random_text:after {
  content: "This is a text";
}

other_select .some_random_text:after {
    content: "This is a default text";
}

However, it is important to note that JavaScript and similar technologies are more commonly used for this kind of dynamic manipulation.

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

Swapping images when hovering over a list item or anchor tag

I recently came across an intriguing issue with changing the img src on a:hover. Check out this SCREENSHOT When hovering over the <a> sector, it's not showing the white image as expected. I have black and white icons, and I want the img src to ...

htmlcsstags

Erase jQuery from the text

I am struggling with splitting or removing text from a filename. For example, if I have filenames like: 200726100_50-0002.JPG 230514008_60-0001.JPG The desired result should be: 230514008_60.JPG 200726100_50.JPG Am I not using the split function cor ...

javascriptjqueryhtml

When hovering over the child element, the hover effect on the parent element should be disabled

I'm dealing with a situation where I have two nested <div> elements. <div class="parent"> <div class="child"></div> </div> The challenge here is that I want to change the background of the .parent ...

csshover

Issue with ngRepeat directive

I'm attempting to display an array in a table Below is the relevant code snippet js: var d = [[ '12:00', 'X-Files', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non nisi in velit tristique scelerisque. ...

htmlangularjsjson

What's the reason for the element not inheriting margins from its parent?

I am facing an issue with centering an h1 header within a .banner element. When I try to apply margin to the header, it appears to indent not from the top border of the banner, but rather from the nav element located above the banner. After inspecting the ...

htmlcssmargin

Conceal Datalist Element when the checkbox status in the database is marked

In order to customize my datalist, I integrated images and data from a SQL database. To enhance user experience, I included a checkbox option for hiding specific items in the list. However, my challenge lies in concealing individual items that have been ch ...

c#htmlasp.net.netcheckbox

Navigate quickly to different sections using jump links and adjust the positioning with the style attribute, such as "padding-top

My website incorporates Jump Links to navigate between page elements as part of an interactive User Guide. Everything functions properly on Firefox, IE, and Edge, but Chrome and Opera seem to disregard the 'padding'. Due to a fixed menu bar on t ...

htmlcssgoogle-chrome

Having trouble displaying a dynamically created table using jQuery

I'm a newcomer to jQuery and I need help with querying 2 web services. The goal is to query the first service, use an attribute value to query the second one, and then populate a table with data from both services. Please take a look at my code on th ...

htmljquerydatatables

HTML: Deconstruct, Analyze, and Revamp for a mobile-friendly site

I am currently working on a project for my computer science class in which we are required to choose an application that interests us and understand how it functions. I decided to focus on the technology provided by dudamobile.com This particular app is d ...

htmlweb-applicationsmobilecomputer-science

Does UTF-16 encompass ASCII characters? If so, what causes UTF-16 to be at odds with ASCII as stated in the HTML Standard?

The Wikipedia article on UTF-16 states, "...[UTF-16] is also the only web-encoding incompatible with ASCII." (at the end of the abstract.) This refers to the HTML Standard. Is this statement accurate? As a C# / .NET developer, I know that both .NET and .N ...

c#html.netasciiutf-16

Express server does not send any response body

When a request is made to my express application, it returns an empty {}. const express = require('express'); const bcrypt = require('bcrypt'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyPar ...

htmlnode.jsexpress

How to customize CSS slider animation - sleek CSS slider with navigation feature?

My goal is to build a CSS-only automatic animated slider with navigation buttons. While the slider animation and navigation function separately, combining them causes the automatic animation to override the navigation system, preventing me from switching b ...

htmlcssslidercss-animations

Modifying the color of an SVG shape with a checkbox toggle

Is there a way to dynamically change the fill color of an SVG shape by clicking on a checkbox? I have managed to achieve this functionality, but when I enclose the checkbox input in a div tag, it stops working. #circles { fill: #00ffff; } #circ-toggl ...

htmlcsssvgcheckbox

Creating a border with tabs and a triangle using CSS

I'm having trouble getting my HTML/CSS tabs to look like the ones in the image. I've experimented with border-radius but haven't been able to achieve the desired result. Can anyone provide guidance on how to replicate these tabs using only ...

cssbordercss-shapes

Coping with validation problems across multiple pages in a form-linked Datatable

I have utilized a datatable to create a table where each row contains either an input or select field, with pagination across multiple pages. The problem arises when the datatable renders 10 rows of HTML elements by default and jQuery validation renders p ...

jquerycsssql-serverajaxdatatables

Tips on resizing images in card groups with bootstrap 4?

Hey there! I've come across an issue with my code that was initially working perfectly. The images I'm using have different resolutions, causing the card images to display in various sizes. Is there a way to implement image scaling to ensure all ...

htmlcssbootstrap-4

Changing Image to Different File Type Using Angular

In my Angular Typescript project, I am currently working on modifying a method that uploads an image using the input element of type file. However, I no longer have an input element and instead have the image file stored in the assets folder of the project ...

javascripthtmlangulartypescript

Attempting to vertically center text within a percentage div

I'm trying to create a button that is centered on the screen with text aligned vertically within the button. I want to achieve this using CSS only and restrict the usage of percentages only. Here's what I have so far: Check out my code snippet h ...

css

Arranging Django/CSS Icon and form input within a single column

I'm struggling to display an icon from Font Awesome and a form input in the same column. <div class="form-group"> <form method="POST" enctype="multipart/form-data"> {% csrf_token %} {{ form.medi ...

cssbootstrap-4django-forms

Preventing the user from using the mouse wheel until the CSS animation finishes

I am working with multiple functions that are triggered by scrolling the mouse wheel up and down. These functions must be called in a specific order, but the issue arises when users scroll quickly causing the CSS animations from the previous function to ...

jqueryhtmlcss