Как обернуть текстовое меню

Я использую 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 [email protected]; 
    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; 
}

источник

2016-02-12 Anonymous

< div style="word-wrap: break-word;flex: inherit" class="ui item active"> использование Это приведет длинное слово на следующую строку

источник

2016-02-12 11:18:12 yesarpit

helloo @yesarpit Мне нравится ваш ответ ... Мне не нужно создавать класс 'p.wr' ... спасибо вам большое ... –

Рад, что это вам помогло – yesarpit

вы пропустите «ширина: 230px» Coz без этого он не будет работать

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

Вы можете использовать любой размер ширины

источник

2016-02-12 11:12:28

Helloo @GiorgiGogitidze поблагодарить Вас за указав его ,,, –

спасибо точка –

Используйте этот CSS ниже , Я думаю, это поможет вам.

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

источник

2016-02-12 11:16:01

Helloo ,, @SarowerJahan спасибо Youu ... что помогло ,,, –

Как обернуть текстовое меню

ответ

Смежные вопросы