如何在CSS中将文本段落显示为正方形/矩形

我已经创建了一个模式弹出窗口，并一直在试图找出如何使模式中的文本在顶部、底部、左侧和右侧对齐（显示为矩形/正方形）。我尝试了

块

，但不起作用

因此，模态

部分

文本如下所示：

xxxxxxxx xxx xxxx xx xxx xxxxx xxx xxxxxxxxx
xxx xxxxx xx xxxxx xxxx xxxx  xxxx xxxxxxxx 
xxxx xxxxxxxx xx xxxxx xx xx xxxx xxx x xxxxxxx
xx x x  x xx xxxxx x x  x x xx  x xxx x x x 

而且是锯齿状的

我如何使它没有锯齿状的边缘像

xxxxxxxx xxx xxxx xx xxx xxxxx xxx xxx xxxx  xx
xxx xxxxx xx xxxxx xxxx xxxx  xxxx xx   xxxxx x 
xxxx xxxxxxxx xx xxxxx xx xx xxxx xxx x xxxxxxx
xx x x  x xx xxxx x x  x   x  x xx  x xxx x x x 

我已经试了一段时间了，似乎没能得到它

编辑：添加了CSS

#modal{
background-color:    #4D94B8;
outline-color:    #180238;
border: 1px solid #3B7593;
border-radius: 80px;
font-family:  arial;
text-align: justify;
display:  inline-block;
text-align:  justify;
left: 50%;
top: 50%;
width:24%;
height:50%;
z-index: 1000;
margin-left: 35%;
margin-top:  7%;
}

.mHeader{
    text-decoration:    underline;
    text-align:         center;
    padding-top:      20%;
    font-size:          1vw;
}

.mButton{
    background-color:   #929292;
    border-radius: 100%;
    color:    #FFFFFF;
    text-align:center;
        height: 1.5vw;
        width: 7vw;
    margin-top:  5%;
    margin-bottom:  5%;
    margin-left:  36.5%;
    margin-right: auto;
    font-size:  .72vw;
    border-style:  none;
    border: 1px solid #666666;
}

section{
    padding-left: 10%;
    padding-top:  1%;
    margin-left: auto;
    margin-right: auto;
     font-size:  .9vw;
    font-weight:  bold;
    display:   block;
    line-height:  20px;
    margin-top:   0%;
    margin-left: auto;
    margin-right: auto;
text-align:  justify;
}

我是网络开发新手，我确信有很多css不属于这里……请不要嘲笑我

---

编辑：这里是JSFIDLE链接：

您要查找的内容称为文本对齐：

text-align: justify;

---

是用于文本对齐的Mozilla开发人员网络参考。

假设您的节位于类为modal的元素中：

.modal section{
  text-align: justify
}

---

可以使用text align:justify和伪元素避免任何文本出现在虚拟的最后一行上

p{
宽度：18em；
文本对齐：对齐；
}
p：在{/*之后添加一条额外的不可见线，因此任何其他线都是对的*/
内容：''；
显示：内联块；
宽度：100%；
垂直对齐：顶部；
}

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
xx x x xx xxxxx x x x xx x xxx x x

其他答案不起作用的原因是因为段落内有换行标记。如果您使用GCyrillus发布的解决方案，并将文本的每一部分都设置为一个段落，则应该可以解决此问题。

谢谢您的回答。我相信我早就试过了，现在仍然不起作用。让我把我的CSS贴到问题上。我是网络开发新手，我确信其中有很多css不属于我……但是我的模式看起来是我想要的（除了合理的文本）……请不要取笑我，萝莉，我知道这是正确的答案，但是这不起作用。你可以看看我的css并告诉我为什么吗？我知道这是正确的答案，但是这不起作用。你可以看看我的css，并告诉我为什么吗？谢谢你的回答。我相信所有这些答案都会奏效……但没有一个对我有效。我对web开发非常陌生，我非常确定我当前的css中有某种东西阻止了解决方案。你可以看看我的css，看看是否有什么东西阻止了我寻求的解决方案吗？我已经使用了W3 css验证器，并且没有errors@JeffOrris你能提供与css一起使用的html吗。也许会像我做的那样产生一个片段，你可以制作一个JSFIDLE，包括你正在使用的HTML，来重现这个问题吗？给我一点时间……我以前没有做过。只用sqlFiddle@bjb568我制作了jsFiddle（我可以补充一下，这太棒了）。如何发布小提琴？只需在此处复制/粘贴链接：）（您需要先按左上角的保存按钮）