jquery - 如果短语/句子不跳到下一行,如何仅将文本设置为左对齐?

标签 jquery html css

<分区>


关闭 6 年前

我正在努力创建一个仅在需要时显示的横幅。我正在研究设计过程,想知道是否应该有一种技术可以实现目标。

所以如果短语/句子可以作为一个句子并且不会跳到下一行,我只需要将文本居中对齐?我将属性 text-align 设置为居中,但是当文本很长并跳到下一行时,第 2 行的文本会居中,这是我不想发生的。所以我想知道是否有实现类似使用 CSSHTML 的东西?

只是寻求一些想法或提示。

Here is the code

最佳答案

您可以使用 css 属性 white-space:nowrap 使 div 最初不换行文本。

然后,您可以使用 scrollWidthinnerWidth 属性确定文本是否环绕。您可以使用 jquery 重置 nowrap 属性,以便元素按您希望的方式显示。

CSS

#innerNotification{
  font-family: Arial, Times New Roman;
  font-size: 8pt;
  font-weight: bold;
  color: #9F6000;
  padding-top: 1%;
  padding-bottom:1%;
  text-align: center;
  white-space:nowrap;
}

JS

if ($('#innerNotification')[0].scrollWidth >  $('#innerNotification').innerWidth()) {
    $('#innerNotification').css('white-space','normal');
    $('#innerNotification').css('text-align','left');
}

这是一个有效的 Fiddle

关于jquery - 如果短语/句子不跳到下一行,如何仅将文本设置为左对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37780793/

上一篇:Javascript 随机背景右上固定

下一篇:html - 删除圆 div 内的线

相关文章:

jquery .css() 仅设置找到的第一个匹配样式值

javascript - 在网页上运行任何Youtube视频URL的YouTube视频html代码

html - 如何将文本 float 在列表项空间的底部?

javascript - 当用户点击链接时,如何制作一个从顶部向下滚动的 div?

jquery - 更改 head 标签中的 CSS 类

jquery - jsTree 显示/隐藏节点

c# - ASP.NET 双列表框使用 JQuery 更新了客户端,以及如何在服务器端检索结果

html - 当我调整窗口大小时,我网页上的元素不断移动

CSS3 过渡旋转问题

html - 我可以在 css 中设置一个元素相对于另一个元素的位置吗?