Question

我正在编写一个ASP.NET MVC应用程序的视图，我有一个循环，为类别名称列表中的每个项目创建一个按钮。每个按钮是一个125px x 125px的盒子。但是，有时类别名称比按钮长。我想让文本包装在盒子里。现在，它正在包装，但在盒子外面。我真的不确定如何解决这个问题。我怀疑它与'wrap'部分有关。我已经添加了这个样子的图像。

What it looks like

Strange text wrapping revealed

CSHTML：

<section class="wrap">

        @foreach (var category in ViewBag.Categories)
        {
            <a role="button" href="#@cat.Replace(" ", "_")" aria-expanded="false" aria-controls="@category.Replace(" ", "_")">
                <div class="category-box">
                    <b>@category</b>
                </div>
            </a>
        }
 </section>

CSS：

.category-box{

    width: 125px;
    height: 125px;
    background-color: rgb(70, 158, 165);
    color: white;
    margin: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 125px;   
    display: block;
    word-wrap: break-word;
}

.category-box:hover{

    background-color: rgb(70, 104, 165);
    color: white;
}

.wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 95vh; 
  width: 10px;
  position: fixed;
  top: 50px;
  left: 0;
  z-index: 999;
}

.wrap a:hover {
  text-decoration: none;
}

Answer 1

线高是个问题。取消设置或设置为1.2em以获得最佳视图。我建议删除<div>内部锚点并将锚点设置为inline-block。

卡住;文本在一个Div中非常奇怪地包装

1 个答案: