文本超出列宽答案

【问题标题】：Text goes beyond column width文本超出列宽
【发布时间】：2016-04-17 16:58:32
【问题描述】：

目前正在尝试开发 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 -->

【问题讨论】：

可能重复：stackoverflow.com/questions/628500/…
Force word wrap through CSS的可能重复
我不明白的是容器已经具有指定的宽度，以及为什么文本会超出容器的指定宽度。我已经尝试了第一个问题的答案，但没有一个成功。我现在正在查看第二个“可能重复”中的答案，但这些都不是与 Foundation 打交道的，这对我没有多大帮助。

标签： javascript jquery html css

【解决方案1】：

我的建议是：

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

【讨论】：

【解决方案2】：

我不确定这是否是您要查找的内容，但您可以使用 CSS 属性 word-wrap: break-word; 即使没有连字符友好的剪切或可破坏的空格，也会强制换行

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

我想我发布它太迟了 4 秒啊啊啊

【讨论】：

不是速度问题。合作更重要。

【解决方案3】：

将此 CSS 用于长显示名称

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

它会将长名称显示为 aaaaaaaaaaaaaa...

【讨论】：

【解决方案4】：

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

【讨论】：