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

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

Answer 2

你错过了“宽度：230px”因为没有这个，它将无法正常工作

class AddQuest extends React.Component {
  render() {
    return <div>
      <input type="text" ref="text" />
      <button onClick={ this.props.onClick.bind(this) }>Add quest</button>
    </div>
  }
}

const mapStateToProp = (
  dispatch,
  ownProps
) => {
  return {
    onClick: function() {
      // this refers to AddQuest Object
      dispatch(addQuestActionCreator(this.refs.text.value));
      this.refs.text.value = '';
    }
  }
}

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

Answer 3

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

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

如何包装文本菜单

3 个答案: