Member 13779417 Ответов: 1

Перенос текста не работает на этикетке внутри оберток - CSS


У меня есть несколько элементов прокрутки, которые настроены с помощью некоторого CSS. Все это работает нормально, но в следующем коде мне нужно, чтобы lblStallMessage1 имел максимальную ширину 200 пикселей, чтобы текст поверх этой ширины был обернут вокруг следующей строки.

<div class="wrapper">
    <section class="horizontal-scroll">
        <div class="item" id="item1" runat="server"><asp:HyperLink ID="hypStall1" runat="server" ><asp:Image ID="imgStall1" width="260px" ImageUrl="~/files/images/car1.gif" runat="server" /></asp:HyperLink><asp:HyperLink ID="hypStall1Avatar" runat="server" ><asp:Image ID="imgStall1Avatar" style="position:relative; float:left; margin-top:-70px; margin-right:-70px;" width="100px" runat="server" /></asp:HyperLink><p style="margin-right:0px;"><asp:Label ID="lblName1" runat="server" Text="" ></asp:Label></p><p style="position:relative; float:left; margin-top:-340px; margin-right:-70px;" width="100px"><asp:Label ID="lblStallMessage1" runat="server" Text="" ></asp:Label></p></div>
    </section>
</div>   

Вот вам CSS..

.wrapper {
    width: 100%;
    margin: auto;
    border: 1px solid #333;
    background-image:url(images/field.jpg);
    background-repeat:no-repeat;
 }
.horizontal-scroll {
     overflow: hidden;
     overflow-x: scroll;
     overflow-y: hidden;
     white-space: nowrap;
     padding: 0px 0;
     height:380px;
 }
.item {
     border: 0px solid #333;
     display: inline-block;
     width: 260px;
     text-align: center;
     padding: 20px 0px;
     font-size: 20px;
     margin-left: 50px;
     margin-bottom: 60px;
 }


Что я уже пробовал:

Я пробовал добавлять..
word-break: break-word; max-width:200px;

к абзацу, который окружает элемент управления меткой. Я также пробовал его внутри самого элемента управления Label, но ничего не меняется.

1 Ответов

Рейтинг:
0

Richard Deeming

Проблема в том, что вы наследуете white-space: nowrap; от родителей .horizontal-scroll элемент.

Добавь:

word-break: break-word; max-width: 200px; white-space: normal;
к стилю родителя <p> и текст должен быть завернут, как и ожидалось.