css实现一行文字居中，多行文字居左

css实现一行文字居中，多行文字居左

第一种方法：

<style>
    *{margin:0;padding:0;}
    .box{width:500px;height:300px;border:1px solid #000;text-align: center;}
    p{display:inline-block;text-align: left;}
</style>

<div class="box">
    <p>水电费水电费水水电费水水电费水电费水水电费水电费水电费费水电费水电费水水电费水电费水电费费电费水电费费</p>
</div>

第二种方法：

<style>
    *{margin:0;padding:0;}
    .box{width:500px;height:300px;border:1px solid #000;}
    p{display:table;margin:0 auto;}
</style>