仅当遇到换行符时才如何使居中文本左对齐？

Question

如果碰到其所包含的空间的末端并必须切换到下一行，如何调整文本的左对齐？ CSS中是否有固有的东西可以检测到它，或者它必须是JavaScript解决方案？

这是小提琴，因此您可以看到它的行为： https : //jsfiddle.net/fj4ddmey/2/

 .text.container { margin: 0 auto; text-align: center; width: 350px; border: 1px solid black; } .text.container.two { text-align: left; } 

 <div class="text container"> <p>This is how short sentences should look</p> </div> <div class="text container"> <p>This text should be left aligned because it hits a line break</p> </div> <div class="text container two"> <p>This is how it should look, but it needs to be a fluid solution</p> </div> 

Answer 1

像这样使用flexbox

 .container { display: flex; justify-content: center; } 

 <div class="container"> <p>This is how it should look, but it needs to be a fluid solution</p> </div> 

这是JSFiddle演示

Answer 2

您可以将<p>设置为内联块，这样容器上的text-align:center将首先使<p>标记居中，而不是文本居中。 内联块具有缩小以适合的功能，这意味着宽度由内容决定，并且永远不会超出容器范围，使用text-align:left ，包装时，其中的文本将保持左对齐。

 .container { width: 350px; margin: 0 auto; text-align: center; outline: 1px solid black; } .container p { display: inline-block; text-align: left; outline: 1px dotted red; } 

 <div class="container"> <p>This is how short sentences should look</p> </div> <div class="container"> <p>This text should be left aligned because it hits a line break</p> </div> 

Answer 3

您可以使用jQuery确定元素的高度，如果元素的高度大于一行，则添加一个类以适当地证明文本正确。

这样的事情应该起作用：

function countLines(e) {
  var elementHeight = e.innerHeight();
  var lineHeight = parseInt(e.css('line-height'));
  var lines = elementHeight / lineHeight;
  return(lines > 1);
}

$('p').each(function() {
    if(countLines($(this))) {
        $(this).addClass('two'); //class to left justify
    }
})

您可以在这里看到它的工作： https : //jsfiddle.net/igor_9000/fj4ddmey/1/