Skip to main content
Se mejora la solución para satisfacer completamente el problema planteado por mí.
Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

Usando la propiedad con CSS3:

.no-seleccionable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Aunque esto no es para todos los navegadores y lo que quieres es algo que requiere probarse en todas habiendo muchas soluciones.

Solo con CSS podrás lo que quieres. Quizás si el contenido lo pongas en el atributo title para luego mostrarlo con CSS2+ se pudiera también.

Observa:

.no-seleccionable:before {
  content: attr(title)": ";
  position: absolute;
  margin-left: 50%;
}
<div contentEditable="true" class="no-seleccionable" title="tu texto aqui">
  Hola Mundo
</div>

Usando la propiedad con CSS3:

.no-seleccionable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Aunque esto no es para todos los navegadores y lo que quieres es algo que requiere probarse en todas habiendo muchas soluciones.

Solo con CSS podrás lo que quieres. Quizás si el contenido lo pongas en el atributo title para luego mostrarlo con CSS2+ se pudiera también.

Observa:

.no-seleccionable:before {
  content: attr(title)": ";
}
<div contentEditable="true" class="no-seleccionable" title="tu texto aqui">
  Hola Mundo
</div>

Usando la propiedad con CSS3:

.no-seleccionable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Aunque esto no es para todos los navegadores y lo que quieres es algo que requiere probarse en todas habiendo muchas soluciones.

Solo con CSS podrás lo que quieres. Quizás si el contenido lo pongas en el atributo title para luego mostrarlo con CSS2+ se pudiera también.

Observa:

.no-seleccionable:before {
  content: attr(title)": ";
  position: absolute;
  margin-left: 50%;
}
<div contentEditable="true" class="no-seleccionable" title="tu texto aqui">
  Hola Mundo
</div>

se añadieron 177 caracteres en el cuerpo
Origen Enlace
rnrneverdies
  • 16.8k
  • 4
  • 53
  • 81

Usando la propiedad con CSS3:

.no-seleccionable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Aunque esto no es para todos los navegadores y lo que quieres es algo que requiere probarse en todas habiendo muchas soluciones.

Solo con CSS podrás lo que quieres. Quizás si el contenido lo pongas en el atributo title para luego mostrarlo con CSS2+ se pudiera también.

Observa:

.no-seleccionable:before {
    content: attr(title) ": ";
}

<div class="no-seleccionable" title="tu texto aqui"></div>

.no-seleccionable:before {
  content: attr(title)": ";
}
<div contentEditable="true" class="no-seleccionable" title="tu texto aqui">
  Hola Mundo
</div>

Usando la propiedad con CSS3:

.no-seleccionable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Aunque esto no es para todos los navegadores y lo que quieres es algo que requiere probarse en todas habiendo muchas soluciones.

Solo con CSS podrás lo que quieres. Quizás si el contenido lo pongas en el atributo title para luego mostrarlo con CSS2+ se pudiera también.

Observa:

.no-seleccionable:before {
    content: attr(title) ": ";
}

<div class="no-seleccionable" title="tu texto aqui"></div>

Usando la propiedad con CSS3:

.no-seleccionable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Aunque esto no es para todos los navegadores y lo que quieres es algo que requiere probarse en todas habiendo muchas soluciones.

Solo con CSS podrás lo que quieres. Quizás si el contenido lo pongas en el atributo title para luego mostrarlo con CSS2+ se pudiera también.

Observa:

.no-seleccionable:before {
  content: attr(title)": ";
}
<div contentEditable="true" class="no-seleccionable" title="tu texto aqui">
  Hola Mundo
</div>

Origen Enlace
James Peter
  • 420
  • 3
  • 12

Usando la propiedad con CSS3:

.no-seleccionable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Aunque esto no es para todos los navegadores y lo que quieres es algo que requiere probarse en todas habiendo muchas soluciones.

Solo con CSS podrás lo que quieres. Quizás si el contenido lo pongas en el atributo title para luego mostrarlo con CSS2+ se pudiera también.

Observa:

.no-seleccionable:before {
    content: attr(title) ": ";
}

<div class="no-seleccionable" title="tu texto aqui"></div>