0

Si hay un texto sin etiquetas como podría seleccionarlo con css para ocultarlo?

<div class="content">

Hola mundo

<a href="">Enlace</a>

</div>

9
  • 1
    ¿Has intentado algo al respecto?
    – user128299
    el 26 feb. 2021 a las 19:49
  • Ese texto está dentro una etiqueta DIV, así que no comprendo a que te refieres. Si por "etiqueta" te refieres al identificador (id), puedes seleccionarlo a partir de la etiqueta (usando el método getElementsByTagName) o de la clase (usando el método getElementsByClassName), si conoces la posición que tiene en el documento, ya que los seleccionaría todos. el 26 feb. 2021 a las 19:53
  • Sin etiqueta me refiero a que no esta dentro de un label o un span etc. Entonces no sabría como ocultar ese texto. el 26 feb. 2021 a las 20:00
  • @DANIEL FERNANDO SALINAS porque querrías hacer eso?, de todas formas no creo que se pueda con CSS como tal, pues este no reconoce texto, talvez podrías con JS pero no estoy seguro, lo único que se me ocurre es hacer un color:#fff; para que se pierda con el fondo y forzar un color #000!important, para elementos con etiquetas ya que si haces un display none esto también afectara todo el contenido de tu contenedor, eso y por que el texto en si no es un elemento, por lo que tendrías que detectar un elemento mas no el texto como tal. el 26 feb. 2021 a las 20:13
  • No es que quiera hacerlo así, el cms esta arrojando así el texto, entonces es algo que no controlo. el 26 feb. 2021 a las 20:17

1 respuesta 1

2

La mejor forma que se me ocurre para ocultarlo es ocultando el texto asignando un color invisible, cambiando la propiedad del cursor a default para que al pasar sobre el texto invisible el cursor cambiando de forma no revele la existencia del texto, y por ultimo impidiendo la selección del texto ya sea con el cursor que con ctrl+a.

Obviamente todas estas modificas tendrán que ser aplicadas al elemento que contiene dicho texto, ya sea un div o en última instancia el mismo body. Y luego habrá que reestablecer los valores de default de los demás componentes al interno del elemento interesado.

A continuación un ejemplo:

.content {
    color: #0000;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.content * {
    color: #000;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.content p {
    cursor: text !important;
}
.content button, .content p a {
    cursor: pointer !important;
}
.content p a {
    color:blue !important;
}
<div class="content">
    Texto Oculto
    <p>Lorem ipsum <a href="#">enlace</a> dolor sit amet, consectetur adipisicing elit.</p>
    <button>Click</button>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.