Question

我可以做一些事情来将文字换行或调整任务的宽度。如果我可以更改任务高度或类似的高度，那将是很好的。我想包含一定数量的单词，但这会破坏UX。

请帮助我解决这个问题，真是令人头疼。

这是一个CSS代码：

  /*My code*/
html{
    font-family: 'Raleway', sans-serif;
}

.wrapp1{
    width:350px;
    margin:0 auto;
    height:auto;

    margin-top: 80px;

-webkit-box-shadow: 0px 1px 22px -4px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 1px 22px -4px rgba(0,0,0,0.57);
box-shadow: 0px 1px 22px -4px rgba(0,0,0,0.57);
}

.header{
    text-align: center;
    border-bottom: 1px solid #dddddd;
    padding-bottom:10px;
}
.header h1{
    font-size:24px;
    color:#111;
    padding-top: 10px;
    font-weight: 300;
}

ul{
    list-style: none;
    width:260px;
    height:auto;
    font-size:16px;
     margin:0 auto;
    margin-top: 15px;
    line-height:40px;
    border-radius:10px;
    -webkit-box-shadow: 0px 1px 22px -4px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 1px 22px -4px rgba(0,0,0,0.57);
box-shadow: 0px 1px 22px -4px rgba(0,0,0,0.57);
}
ul li{
    padding-left: 10px;
}

.icons{
    float:right;
   margin-top:-37px;
}

.delete{
    margin-right:-10px;
}

button{
    border:none;
    background:none;
}
button img{
    width:30px;
    height:30px;
    cursor: pointer;
}
.insert{
    margin-top:30px;
    border-top:1px solid #dddddd;

}
.insert input{
    width:220px;
    height:30px;
    border:none;
    margin-top:12px;
    margin-bottom: 10px;
    padding-left:10px;
}
.insert button{
    float:right;
    margin-top: 10px;
}

Answer 1

您可以在CSS中使用自动换行属性来编辑元素的自动换行行为。

这是W3学校的参考代码： https://www.w3schools.com/csSref/tryit.asp?filename=trycss3_word-wrap

希望这很有帮助，谢谢。

当文本较长时，则越过边界

1 个答案: