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和一个伪元素来避免任何文本站在虚拟最后一行。

＆＃13;

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;
  }

＆＃13;

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

＆＃13;

Answer 2

您正在寻找的是文本理由：

text-align: justify;

Here是用于text-align的Mozilla开发人员网络参考。

Answer 3

假设您的部分位于具有类modal的元素内：

.modal section{
  text-align: justify
}

Answer 4

其他答案不起作用的原因是因为段落中有换行符。如果您使用GCyrillus发布的解决方案并且还将文本的每个部分设为段落，那么应该修复它。

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

4 个答案: