1

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

3
  • Possible duplicate: stackoverflow.com/questions/628500/…
    – Ben
    Jan 12, 2016 at 21:57
  • Possible duplicate of Force word wrap through CSS
    – isherwood
    Jan 12, 2016 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, 2016 at 22:05

4 Answers 4

3

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>

0
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

1
  • 1
    It's not a speed problem. It's much more important to cooperate.
    – gaetanoM
    Jan 12, 2016 at 22:13
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...

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.