Text goes beyond column width

Question

Currently attempting to develop a web application. One of my concerns is the length of some text maybe longer the row width. How would I get it to just go to the next row, instead of continuing beyond the width?

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

Possible duplicate: https://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers?rq=1 — Ben, Jan 12 '16 at 21:57
Possible duplicate of [Force word wrap through CSS](http://stackoverflow.com/questions/18891755/force-word-wrap-through-css) — isherwood, Jan 12 '16 at 22:00
What I don't understand is that the containers already have a specified width, and why the text is expanding beyond the specified width of the containers. I have tried the answers in the first question, and none of them worked out. Am now looking at answers in the 2nd "Possible Duplicate", but none of theses are dealing with Foundation, which doesn't help me very much. — Moonblaze, Jan 12 '16 at 22:05

score 3 · Answer 1 · answered Jan 12 '16 at 22:03

3

I'm not sure if that's what you look for, but you can use the CSS property word-wrap: break-word; that force to go on a new line even if there is no hyphen-friendly cut or breakable-space

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

I guess i posted it 4 seconds too late ahah

answered Jan 12 '16 at 22:03

PookMook

216
1
7

1

It's not a speed problem. It's much more important to cooperate. – gaetanoM Jan 12 '16 at 22:13

score 3 · Accepted Answer · answered Jan 12 '16 at 22:07

My proposal is:

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

score 1 · Answer 3 · answered Jan 12 '16 at 22:18

1

Use this CSS for long display name

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

It will show long names as aaaaaaaaaaaaaa...

answered Jan 12 '16 at 22:18

Raheel Khan

111
5

score 0 · Answer 4 · answered Jan 12 '16 at 22:03

0

Add word-wrap: break-word to the style of the div.

answered Jan 12 '16 at 22:03

qcz

447
4
8

Text goes beyond column width

4 Answers4