Javascript 更改html<；a>；决议变更时的字母长度？

我有一个HTML代码：

My Text-looong Text

输出：我的文本-长文本

当屏幕分辨率变为小于445px的宽度时，我希望

looong Text

为：

L.Text

，如果它增加，文本将恢复到原始大小

---

有什么帮助吗？谢谢。

您可以将文本拆分为更多元素，然后在CSS中使用@media query来决定显示和隐藏哪个元素

HTML：

<a>
    <span>My Text -</span> 
    <span id='long'>Loooong Text</span>
    <span id='short'>L. Text</span>
</a>

@media screen and (max-width: 445px) {
   #short { display: inline; }
   #long { display: none; }
}
@media screen and (min-width: 446px) {
   #short { display: none; }
   #long { display: inline; }
}

<a>
    <span>My Text -</span> 
    L<span class='collapse'>oooong</span> Text
</a>

@media screen and (max-width: 445px) {
   .collapse { display: none; }
   .collapse::after {content: '.'}
}
@media screen and (min-width: 446px) {
   .collapse { display: inline; }
}

---

这是对Koby Douek的答案的修改，可能适合你。 还利用@media

将折叠部分包裹成一个跨距。然后使用媒体查询切换其显示。您可以使用该类包装任何要折叠的内容

HTML：

<a>
    <span>My Text -</span> 
    <span id='long'>Loooong Text</span>
    <span id='short'>L. Text</span>
</a>

@media screen and (max-width: 445px) {
   #short { display: inline; }
   #long { display: none; }
}
@media screen and (min-width: 446px) {
   #short { display: none; }
   #long { display: inline; }
}

<a>
    <span>My Text -</span> 
    L<span class='collapse'>oooong</span> Text
</a>

@media screen and (max-width: 445px) {
   .collapse { display: none; }
   .collapse::after {content: '.'}
}
@media screen and (min-width: 446px) {
   .collapse { display: inline; }
}

---

您提到您正在使用PHP脚本生成内容，此策略应该是兼容的。

您可以使用伪选择器来实现这一点，但您必须将

id

或类添加到

或

中。我有id和类，您能给我一个例子吗？这样做有一个问题，

looong text

中的文本是由PHP发布的，它会发生变化。