如何使用jquery将显示的文本从一个元素应用到另一个元素

应用内容overflow: hidden使用css和渲染文本的overflow: hidden样式使用jQuery来span元素。 渲染文本显示我不想看到的实际文本。 以下是我试过的代码：

我想在#top-bar-user-name-display元素中显示与#user-name-display display相同的文本。

如何使用简单的脚本实现它？

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：

Alexander Pierce sd ……

Alexander Pierce sdfsdf sd fsd fsdf sdf sd

预期的O / P：

Alexander Pierce sd ……

Alexander Pierce sd ……

Answer 1

#users-name-display显示Alexander Pierce...仅因为您将div帧width设置为150px。 因此，整个文本无法显示，因为您没有限制div宽度。

您必须在CSS中将#top-bar-user-name-display width更改为150。

试试这个代码

 $(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
    

Answer 2

试试这个

 $(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
    

Answer 3

将id users-name-display更改为class users-name-display

为p标签和span指定相同的类名

要么

使用下面的jquery代码

 $(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.