Cómo aplicar el texto mostrado de un elemento a otro usando jquery

overflow: hidden contenido aplicado overflow: hidden estilo overflow: hidden usando css y texto renderizado para span elemento usando jQuery . El texto representado muestra el texto real que no quiero ver. A continuación se muestra el código de cómo lo intenté:

quiero mostrar el mismo texto que #user-name-display en #top-bar-user-name-display elemento.

¿Cómo implementarlo usando un simple script?

HTML:

 $(document).ready(function() { $('#top-bar-user-name-display').html($('#users-name-display').html()); }); 
 #users-name-display { width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 
  

Alexander Pierce sdfsdf sd fsd fsdf sdf sd

O / P actual:

Alexander Pierce sd …

Alexander Pierce sdfsdf sd fsd fsdf sdf sd

O / P esperado:

Alexander Pierce sd …

Alexander Pierce sd …

La #users-name-display Alexander Pierce... solo porque usted estableció el width cuadro div en 150px. Por lo tanto, no se puede mostrar todo el texto, en el segundo que tenía todo el texto porque no ha limitado el ancho div.

Solo debe cambiar el ancho de la #top-bar-user-name-display a 150 en su css.

Prueba este codigo

 $(document).ready(function() { $('#top-bar-user-name-display').html($('#users-name-display').html()); $('#top-bar-user-name-display').css("display","block"); }); 
 #users-name-display, #top-bar-user-name-display { width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #top-bar-user-name-display{ display:none; } 
  

Alexander Pierce sdfsdf sd fsd fsdf sdf sd

Prueba esto

 $(document).ready(function() { $('#top-bar-user-name-display').html($('#users-name-display').html()); }); 
 .users-name-display{ width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display:block; } 
  

Alexander Pierce sdfsdf sd fsd fsdf sdf sd

Cambiar la ID de usuario-nombre-visualización a la clase-nombre-usuario-pantalla

Dar el mismo nombre de clase a ambas tags p y span

O

use el código jquery a continuación

 $(document).ready(function() { var showChar = 100; var ellipsestext = "..."; $('.more').each(function() { var content = $(this).html(); if(content.length > showChar) { var c = content.substr(0, showChar); var h = content.substr(showChar-1, content.length - showChar); var html = c + '' + ellipsestext+ ' ' + h + '  '; $('#top-bar-user-name-display').html(html); $(this).html(html); } }); }); 
 a { color: #0254EB } a:visited { color: #0254EB } a.morelink { text-decoration:none; outline: none; } .morecontent span { display: none; } .comment { width: 400px; background-color: #f0f0f0; margin: 10px; } 
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam ligula sodales orci, congue imperdiet eros tortor ac lectus. Duis eget nisl orci. Aliquam mattis purus non mauris blandit id luctus felis convallis. Integer varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec.