Текст выходит за пределы ширины столбца

В настоящее время пытается разработать веб-приложение. Одна из моих проблем - длина некоторого текста, возможно, более длинная ширина строки. Как мне заставить его просто перейти к следующей строке, вместо того чтобы продолжать за пределами ширины?Текст выходит за пределы ширины столбца

<div class="row"> 
<div class="large-8 column" style="border:1px solid;"><!-- Profile Section Start --> 
<div class="row"> <!-- Row #2 Start --> 
    <div class="large-2 column text-right" style="border:1px solid"><!-- Profile Labels Start --> 
    <label class="radius secondary label">Username</label> 
    <label class="radius secondary label">Displayname</label> 
    </div><!-- Profile Labels End --> 
    <div class="large-6 column end " style="border:1px solid; "><!-- Profile Information Start --> 
    {USERNAME}<br /> 
    {DISPLAYNAME}aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
    </div><!-- Profile Information End --> 
</div><!-- Row #2 End -->

источник

2016-01-12 Moonblaze

Возможный дубликат: https://stackoverflow.com/questions/628500/can -i-stop-100-width-text-boxes-from-extend-beyond-their-container? rq = 1 – Ben

Возможный дубликат [принудительное перенос слов через CSS] (http://stackoverflow.com/questions/18891755/ force-word-wrap-through-css) – isherwood

Я не понимаю, что контейнеры уже имеют указанную ширину, и почему текст расширяясь за пределы указанной ширины контейнеров. Я попробовал ответы в первом вопросе, и никто из них не выработал. Теперь я смотрю ответы во втором «Возможном дублировании», но ни один из тезисов не имеет отношения к Фонду, что мне очень не помогает. – Moonblaze

Мое предложение:

<div class="row"> 
 
    <div class="large-8 column" style="border:1px solid;"><!-- Profile Section Start --> 
 
    <div class="row"> <!-- Row #2 Start --> 
 
     <div class="large-2 column text-right" style="border:1px solid"><!-- Profile Labels Start --> 
 
     <label class="radius secondary label">Username</label> 
 
     <label class="radius secondary label">Displayname</label> 
 
     </div><!-- Profile Labels End --> 
 
     <div class="large-6 column end " style="border:1px solid;box-sizing: border-box; word-wrap:break-word;"><!-- Profile Information Start --> 
 
     {USERNAME}<br /> 
 
     {DISPLAYNAME}aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
 
     </div><!-- Profile Information End --> 
 
    </div><!-- Row #2 End --> 
 
    </div> 
 
</div>

источник

2016-01-12 22:07:57 gaetanoM

Это сработало для меня. – Moonblaze

Добавить word-wrap: break-word в стиле дел.

источник

2016-01-12 22:03:22 qcz

Я не уверен, если это то, что вы ищете, но вы можете использовать свойство CSS word-wrap: break-word;, что заставить пойти на новую строку, даже если нет дефис людей вырезать или ломкий-пространство

http://jsbin.com/zatuluw/edit?html,css,output

Я предполагаю, что я отправил это 4 секунды слишком поздно ахах

источник

2016-01-12 22:03:26 PookMook

Это не проблема скорости. Гораздо важнее сотрудничество. – gaetanoM

Абсолютно верно! – PookMook

Используйте этот CSS для отображения названия долго

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
max-width: 200px;

Он будет показывать длинные имена, как aaaaaaaaaaaaaa ...

источник

2016-01-12 22:18:57

Текст выходит за пределы ширины столбца

ответ

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