html – 如何包装文本菜单

我使用语义ui.我需要包装文本菜单.我添加了自动换行：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/和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;
}

解决方法

使用< div style =“word-wrap：break-word; flex：inherit”class =“ui item active”> 这将为下一行带来长篇大论