Question

目前正在尝试开发Web应用程序。我担心的一个问题是某些文本的长度可能会比行宽更长。如何才能进入下一行，而不是继续超出宽度？

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

Answer 1

我不确定这是不是你要找的，但你可以使用CSS属性 word-wrap: break-word;即使没有连字符友好的剪切或可破坏的空间，强制进入新的行

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

我猜我发布它太晚了4秒ahah

Answer 2

我的建议是：

＆＃13;

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

＆＃13;

Answer 3

将word-wrap: break-word添加到div的样式。

Answer 4

将此CSS用于长显示名称

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

它会显示长名称aaaaaaaaaaaaaa ...

文本超出列宽

4 个答案: