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

Question

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

我想在#top-bar-user-name-display 元素中显示与#user-name-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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="users-name-display">Alexander Pierce sdfsdf sd fsd fsdf sdf sd</p>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs"><span id="top-bar-user-name-display"><!-- Name will be displayed from #users-name-display --></span></span>
</a>

当前 O/P：

亚历山大·皮尔斯...

亚历山大·皮尔斯 sdfsdf sd fsd fsdf sdf sd

预期 O/P：

亚历山大·皮尔斯...

亚历山大·皮尔斯...

Answer 1

#users-name-display 显示 Alexander Pierce... 只是因为您已将 div 框架 width 设置为 150 像素。所以无法显示整个文本，因为您没有限制 div 宽度，所以在第二个您拥有整个文本。

您必须在您的 css 中将 #top-bar-user-name-display 宽度更改为 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p id="users-name-display">Alexander Pierce sdfsdf sd fsd fsdf sdf sd</p>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs"><span id="top-bar-user-name-display"><!-- Name will be displayed from #users-name-display --></span></span>
</a>

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="users-name-display" class="users-name-display">Alexander Pierce sdfsdf sd fsd fsdf sdf sd</p>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs"><span id="top-bar-user-name-display" class="users-name-display"><!-- Name will be displayed from #users-name-display --></span></span>
</a>

我添加了一个类作为 users-name-display

和显示块

Answer 3

将 id users-name-display 更改为类 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 + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;</span>';
      $('#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment more">
	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.
</div>
<span id="top-bar-user-name-display"><!-- Name will be displayed from #users-name-display --></span>