How to wrap a text menu

Question

I use semantic-ui. I need to wrap a text menu. I add word-wrap: break-wordas shown below, but has no effect.

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

If you need visualization: http://jsfiddle.net/mWcmg/378/ and http://semantic-ui.com/collections/menu.html#secondary-menu

I have no idea what can be changed. This is the source:

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

use < div style="word-wrap: break-word;flex: inherit" class="ui item active"> This will result in a long word in the next line

Answer 2

you skip "width: 230px" without this, it will not work

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

You can use any width size.

Answer 3

css . , .

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