如何换行文本菜单

Question

我用semantic-ui。我需要换行文本菜单。我添加 word-wrap: break-word 如下所示，但没有任何效果。

<div class="ui secondary pointing menu">
  <div style="word-wrap: break-word" class="ui item active">
  <p class="wr">very very very long long long long long text text text text text very very very long long long long long text text text text text </p>
  </div>
  <div class="right menu">
    <a class="ui item">
      Logout
    </a>
  </div>
</div>

如果需要可视化：http://jsfiddle.net/mWcmg/378/ and http://semantic-ui.com/collections/menu.html#secondary-menu

我不知道可以修改什么。这是来源：

/*---------------------
   Secondary Pointing
-----------------------*/

.ui.secondary.pointing.menu {
  margin-left: 0em;
  margin-right: 0em;
  border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;
}

.ui.secondary.pointing.menu .item {
  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-radius: 0em;
  align-self: flex-end;

  margin: 0em 0em -@secondaryPointingBorderWidth;
  padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
  border-bottom-width: @secondaryPointingBorderWidth;
  transition: @secondaryItemTransition;
}

/* Item Types */
.ui.secondary.pointing.menu .header.item {
  color: @secondaryPointingHeaderColor !important;
}
.ui.secondary.pointing.menu .text.item {
  box-shadow: none !important;
}
.ui.secondary.pointing.menu .item:after {
  display: none;
}

/* Hover */
.ui.secondary.pointing.menu .dropdown.item:hover,
.ui.secondary.pointing.menu .link.item:hover,
.ui.secondary.pointing.menu a.item:hover {
  background-color: transparent;
  color: @secondaryPointingHoverTextColor;
}

/* Pressed */
.ui.secondary.pointing.menu .dropdown.item:active,
.ui.secondary.pointing.menu .link.item:active,
.ui.secondary.pointing.menu a.item:active {
  background-color: transparent;
  border-color: @secondaryPointingBorderColor;
}

/* Active */
.ui.secondary.pointing.menu .active.item {
  background-color: transparent;
  box-shadow: none;
  border-color: @secondaryPointingActiveBorderColor;
  font-weight: @secondaryPointingActiveFontWeight;
  color: @secondaryPointingActiveTextColor;
}

/* Active Hover */
.ui.secondary.pointing.menu .active.item:hover {
  border-color: @secondaryPointingActiveHoverBorderColor;
  color: @secondaryPointingActiveHoverTextColor;
}

/* Active Dropdown */
.ui.secondary.pointing.menu .active.dropdown.item {
  border-color: @secondaryPointingActiveDropdownBorderColor;
}

/* Vertical Pointing */
.ui.secondary.vertical.pointing.menu {
  border-bottom-width: 0px;
  border-right-width: @secondaryPointingBorderWidth;
  border-right-style: solid;
  border-right-color: @secondaryPointingBorderColor;
}
.ui.secondary.vertical.pointing.menu .item {
  border-bottom: none;
  border-right-style: solid;
  border-right-color: transparent;
  border-radius: 0em !important;
  margin: @secondaryVerticalPointingItemMargin;
  border-right-width: @secondaryPointingBorderWidth;
}

/* Vertical Active */
.ui.secondary.vertical.pointing.menu .active.item {
  border-color: @secondaryPointingActiveBorderColor;
}

/* Inverted */
.ui.secondary.inverted.pointing.menu {
  border-color: @secondaryPointingInvertedBorderColor;
}

.ui.secondary.inverted.pointing.menu {
  border-width: @secondaryPointingBorderWidth;
  border-color: @secondaryPointingBorderColor;
}
.ui.secondary.inverted.pointing.menu .item {
  color: @secondaryPointingInvertedItemTextColor;
}
.ui.secondary.inverted.pointing.menu .header.item {
  color: @secondaryPointingInvertedItemHeaderColor !important;
}

/* Hover */
.ui.secondary.inverted.pointing.menu .item:hover {
  color: @secondaryPointingInvertedItemHoverTextColor;
}

/* Active */
.ui.secondary.inverted.pointing.menu .active.item {
  border-color: @secondaryPointingInvertedActiveBorderColor;
  color: @secondaryPointingInvertedActiveColor;
}

Answer 1

你错过了 "width: 230px" 因为没有这个，它不会工作

p.wr {
  word-wrap: break-word;
  width: 230px;
}

您可以使用任何尺寸的宽度

Answer 2

使用下面的 css。我认为它会对你有所帮助。

.ui.secondary.pointing.menu .active.item{
    width:100%;
 }

Answer 3

使用< div style="word-wrap: break-word;flex: inherit" class="ui item active"> 这会将长字带到下一行

如何换行文本菜单

How to wrap text menu

html

css

less

semantic-ui