Перенос текста не работает на этикетке внутри оберток - 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, но ничего не меняется.