Question

我的angularJS应用程序存在这种问题。当我缩小浏览器的窗口时，相应地我减少了一个内部有一个很长的单词的面板（比如20个字符），我的代码是＆＃39; pre＆＃39; html标签不破线。在某些时候，“逃避”这个词是“逃避”。从面板和效果非常非常丑陋。有没有办法通知＆＃39;在面板上我的单词不能开始换行并避免单词从面板中逃脱？先感谢您。

这是我的代码

    <div class="panel-body" uib-collapse="isCollapsedHeader">
            <div class="row">
                <label class="col-lg-2 label-margin"> Data riferimento </label>
                <div class="col-lg-1 right-col-margin">{{fondo.dataRif}}</div>
                <label class="col-lg-2 label-margin"> Chiave IB </label>
                <div class="col-lg-7 i9fontPre right-col-margin">{{fondo.chiave}}</div>
            </div>
</div>

和我的css

.i9fontPre {
    white-space:pre; 
    font-size: 14px;
    font-family:"Times New Roman", Georgia, Serif;
}

.row label.label-margin { 
    margin: 0px 0px 1px 0px !important;
}

.row  .right-col-margin{ 
    margin: 0px 0px 8px 0px !important;
}

Answer 1

请尝试使用html5 wbr标签进行长话。

示例：

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery**<wbr>**longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

请查看以下链接以获取解决方案

https://jsfiddle.net/1pwmnq3L/

Answer 2

您可以使用word-wrap: break-word;进行分解。这是一个有效的例子：

#box {
  display: inline-block;
  width: 250px;
  height: 250px;
  border: 2px solid blue;
  border-radius: 4px;
  word-wrap: break-word; 
}

<div id="box">
  <pre>
    Reeeeeaaaaaaaaaaaaaalllyyyylongword
  </pre>
</div>

您可以将word-wrap应用于<pre>或其容器元素。

Answer 3

根据我对你从css3 Ellipsis属性中隐藏文本的问题发表评论。请查看以下链接。

＆＃13;

div{ width:120px; overflow:hidden; text-overflow:ellipsis;}

＆＃13;

<div>
  logggggggggggggggggggggggggggggworddddddddddddddd
</div>

＆＃13;

调整面板以减少屏幕，当面板内部有一个单词＆＃39; pre＆＃39; html标签

3 个答案: