如果短语/句子不跳转到下一行，我该如何设置文本左对齐 - 离开？

Question

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

所以我只需要对齐文本为中心，如果短语/句子可以适合作为一个句子，并不跳转到下一行？我将属性text-align设置为中心，但当文本很长并跳到下一行时，则第2行上的文本会居中，而我不希望发生这种情况。所以我想知道是否有像使用CSS和HTML这样的东西？

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

Here is the code

Answer 1

你可以使用CSS属性white-space:nowrap使DIV最初不换行。

然后，您可以确定文本是否使用scrollWidth和innerWidth属性环绕。您可以使用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

Answer 2

您可以在CSS中使用媒体查询。您只需手动找到想要更改对齐方式的屏幕尺寸即可。 一个例子是

#innerNotification{ 
    text-align:left; 
} 
@media screen and (min-width:700px){ //pick the correct screen width here 
#innerNotification{ 
    text-align:center; 
} 
} 

的是在这里媒体查询了很多资料： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries