Is it possible to conceal specific HTML elements using only CSS?

Recently I encountered some HTML code that caught my attention:

<address>telephone no  <span>-</span>  Some Street 2  <span>-</span>  9999 ZZ Place <span>-</span>  Something else</address>

This particular piece of code is located on a responsive website and, specifically on a smaller viewport, I have the desire to make the following lines invisible:

Some Street 2  <span>-</span>  9999 ZZ Place <span>-</span>

I am seeking a method using only CSS to achieve this without any modifications to the HTML code. While I understand that simply adding a div with a class could serve this purpose, there are certain restrictions preventing me from pursuing this option.

Your insights and advice on this matter would be greatly appreciated!

htmlcss

Answer №1

Utilize the parent's pseudo element :after to display the text you want.

@media (max-width: 600px) { /* <--- preferred screen size for address change */
    address {
        display: none;
    }

    div:after {
        content: 'Contact Number - Main Street';
        font-style: italic;
    }
}
<div>
    <address>Contact Number <span>-</span> Main Street 2 <span>-</span> 1234 AB Place <span>-</span> Something else</address>
</div>

Answer №2

After some brainstorming, I came up with a solution for this layout challenge. However, there is a drawback: I struggled with positioning the last line directly to the right of the first one, so I resorted to hardcoding the width of the first line (set at 7em).
I'm open to suggestions and eager to hear if anyone has a better idea.

@media (max-width: 30em) {
  address {
    height: 1.25em;
    line-height: 1.25;
    overflow: hidden;
    padding-left: 7em;
    text-indent: -7em;
  }
  address span {
    display: block;
  }
  address span:nth-child(2) {
    margin-top: -7.5em;
  }
}
<address>telephone no  <span>-</span>  Some Street 2  <span>-</span>  9999 ZZ Place <span>-</span>  Something else</address>

Answer №3

Is this a suitable solution?

@media screen and (max-width: 500px) {
address {
    position: absolute;
    width: 0;
    height: 0;
    font-size: 0;
    z-index: -999;
}
address:after {
    position: static;
     content: 'telephone no';
    display: block;
    width: 100px
        height: auto;
    font-size: 14px;
    white-space: nowrap;

}
}

Check it out on JsFiddle here!

Although a different answer has been selected, I enjoy exploring more about this topic personally. For those interested, here's an alternative method without using the :after pseudo-class.

@media screen and (max-width: 800px) {
address {
    width: 82px;
    height: 20px;
    overflow: hidden;
    background-color: salmon;
}
}

Always consider other possible approaches!

Answer №4

Unfortunately, CSS does not provide a direct way to hide elements like HTML does. In order to conceal an element in CSS, you must enclose it within a div or another tag.

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

The main menu vanishes when you hover over it after the affix class is activated

I am currently working on creating a horizontal dropdown menu that expands on mouseover and collapses on mouseout under one of the main menu items. The functionality of this effect is working fine, except for one issue. When I scroll down and activate the ...

jqueryhtmlcss

How can I store HTML5 input type date/time data accurately as Date Time in Rails?

Is there a way to handle two inputs in HTML5 so that both can be sent to the controller and saved as Date Time? Alternatively, is there any helper or gem that mimics a date and time picker from HTML5? HTML5 inputs: %input{:type => "date", :value => ...

jqueryruby-on-railshtmldatetimehtml-helper

Prevent page refresh when submitting a form using PureCSS while still keeping form validation intact

I'm currently implementing PureCSS forms into my web application and facing a challenge with maintaining the stylish form validation while preventing the page from reloading. I discovered that I can prevent the page reload by using onsubmit="return f ...

javascripthtmlajaxformsyui-pure-css

Utilize the alignment capabilities of the Bootstrap framework or any other suitable plugin for

I am trying to dynamically display my div's similar to the image below. I am not able to find a solution for this problem on SO or Google yet. https://i.sstatic.net/0QcfF.jpg .box { width: 25%; height: auto; float: left; } .box-1 { backgr ...

csstwitter-bootstrap-4

Adjusting the Direction of Flex Components

As someone who is new to css and html design, I recently started using flex in my bootstrap designs. My goal was to have the components sorted from left to right direction, similar to how it's done on this site. Now, I am looking to shrink the slider ...

htmlcssflexboxcarousel

Stopping a file transfer in case of browser closure or upload cancellation

When working on uploading a file asynchronously using HTML5 in MVC3, a common issue arises when dealing with large files such as 1GB. If the upload process is cancelled or the browser is closed at 50% completion, a 500MB file still gets saved in the target ...

c#javascriptasp.net-mvc-3htmlfile-upload

Difficulty with Bootstrap's media object

When commenting on my blog, the media object is used as shown here: . However, if the comment contains a large object, the media object ends up overlapping the sidebar like in this example: . Any suggestions on how to resolve this issue? Thank you! ...

cssflexboxbootstrap-4media

Customizing event colors in Full Calendar

My interactive calendar is created using : $('#calendar').fullCalendar({ height: 300, //............. events: jsonData, month: firstMonth }) I am looking to dynamically change the color of an event based on certain conditions ...

javascriptjquerycsscalendarfullcalendar

Custom Component in React Bootstrap with Overflowing Column

I am working on a custom toggle dropdown feature in my React application: import React from 'react'; import 'react-datepicker/dist/react-datepicker.css'; const DateRange = props => ( <div className="dropdown artesianDropdo ...

javascripthtmlcsstwitter-bootstrapreactjs

Ways to expand the width of a div on hover - Angular navbar dropdown utilizing Bootstrap 4

I am attempting to make the div full width while also implementing a slideDown/Up effect. I am struggling to identify the specific CSS needed to adjust the width accordingly. Currently, this is what I have: I can see that the class open is dynamically ad ...

csstwitter-bootstrapbootstrap-4

Angular dropdown tooltip for overflowing text

Here is the select element in question: <select id="select-full" title="Make selection" class="form-control form-custom input-sm" name="Select" ng-model="form.select" ng-options="select.displayName as select.text for select in selec ...

htmlangularjsselecttooltip

A couple of inquiries (Bounce, Align)

I am attempting to center the text within the circles and make them bounce when the circle is hovered (the text inside the circle). Check it out here: http://jsfiddle.net/cJ3se/ Would appreciate any assistance. Denver ...

jquerycsscentervertical-alignmentbounce

When I try to upload an image onto my website, the layout of my text gets disrupted

There seems to be quite a gap between the welcoming message and the main body text. Significant spacing noticed between Title and body ...

javascripthtmlcss

Determine the position of the cursor in an editable span

Is there a way to add text at the cursor position in an editable span when a button is clicked? The span contains multiple lines of text and HTML tags. [Take a look at this example on JSFiddle](http://jsfiddle.net/8txz9sjs/) ...

javascriptjqueryhtml

Are there numerous instances of jQuery references both preceding and following the use of '$.noConflict'?

Managing a large project with thousands of PHP files can be challenging, especially when dealing with conflicting jQuery references that hinder the implementation of a desired plugin. Consider this scenario: <html> <head> ...

javascriptphpjqueryhtml

When I hover over one menu item, it interferes with my CSS transitions because the other menu items are hidden

I've been attempting to create a menu with very specific behavior: 1) Submenu transitions in when its corresponding menu item is hovered over 2) Submenu remains visible for a moment after moving the mouse away before transitioning out 3) If another me ...

jqueryhtmlcss

View content from an external file within an iframe

My goal is to showcase a text file within an iframe that updates automatically every second. To achieve this, I have created a simple function: function refresh() { $("#derek").attr('src', $("#derek").attr('src')); }; The automati ...

javascriptphpjqueryhtmliframe

Listen for changes in the div height in Angular 2 using HostListener

After spending hours researching Event Listeners in Angular 2, it's clear that there is a lack of comprehensive documentation on the topic. My goal is to set the height of various div groups (generated using ngFor) to match the height of the tallest ...

javascriptcssangular

Parent div not properly adjusting its height

I am currently working on developing a fluid layout, however I have encountered a minor issue with the height of the container. The outer <div> (highlighted in yellow, ip_A-1) is not adjusting its height according to its child elements. You can view ...

css

Adjust the width of the dropdown list to be distinct from the width of the dropdown button

My goal is to create a dropdown where the width of the button is different from the width of the list. I am aware that we can adjust the widths using inline styling like style={{ minWidth: '200px' }}. Now, I want to set the width of the dropdown ...

cssreactjscss-selectorsdropdownfluent-ui