如何使用jQuery将显示的文本从一个元素应用于另一个 [英] How to apply displayed text from one element to other using jquery

问题描述

使用css应用内容overflow: hidden样式，并使用jQuery将文本呈现到span元素.呈现的文本显示的是我不想看到的实际文本.下面是我如何尝试的代码:

Applied content overflow: hidden style using css and rendered text to span element using jQuery. Rendered text is displaying actual text which I don't want to see. Below is the code how i tried:

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

i want to display same text as #user-name-display in #top-bar-user-name-display element.

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

how to implement it using 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;
}

<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:

亚历山大·皮尔斯(Alexander Pierce sd)...

Alexander Pierce sd...

亚历山大·皮尔斯(Alexander Pierce)sdfsdf sd fsd fsdf sdf sd

Alexander Pierce sdfsdf sd fsd fsdf sdf sd

预期O/P:

亚历山大·皮尔斯(Alexander Pierce sd)...

Alexander Pierce sd...

亚历山大·皮尔斯(Alexander Pierce sd)...

Alexander Pierce sd...

推荐答案

#users-name-display显示Alexander Pierce...仅仅是因为您已将div框架width设置为150px.这样就无法显示整个文本，因为您没有限制div的宽度，所以第二秒钟就拥有了整个文本.

The #users-name-display display Alexander Pierce... only because you had set the div frame width to 150px. So whole text can't be displayed, in the second you had the whole text because you haven't limit the div width.

您必须在CSS中将#top-bar-user-name-display宽度更改为150.

You must just change the #top-bar-user-name-display width to 150 in your css.

尝试此代码

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

这篇关于如何使用jQuery将显示的文本从一个元素应用于另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！