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

Question

我创建了一个模态弹出窗口，并一直试图弄清楚如何使模态中的文本在顶部、底部、左侧和右侧对齐（显示为矩形/正方形）。我已经尝试过block但不起作用。

所以模态section 文本看起来像这样：

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 不属于这里......请不要笑我。

编辑：这是 jsFiddle 链接： https ://jsfiddle.net/n8LLdvme/

Answer 1

您可以使用 text-align:justify 和伪元素来避免任何文本站在虚拟的最后一行。

p {
  width:18em;
  text-align:justify;
  }
p:after {/* this adds an extra invisible line, so any other line is justified */
  content:'';
  display:inline-block;
  width:100%;
  vertical-align:top;
  }

<p>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 </p>

编辑 如今，text-align-last 被广泛实施以避免欺骗

p {
  width:18em;
  text-align:justify;
  text-align-last:justify;
  }

<p>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 </p>