Question

一个问题......我们如何在字符串中插入符号并创建多行字符串以防止固定宽度元素的轴长度溢出？！

包含问题的Exapmple代码：

<div style="width:100px;">
    Too Long String...
</div>

我需要像这样：

<div style="width:100px;">
    Too Long String (Line 1st)<br />
    Too Long String (Line 2nd)<br />
    Too Long String (Line 3rd)<br />
    Too Long String (Line 4th)<br />
    ...
</div>

我应该使用哪种客户端脚本？！

Answer 1

这应该这样做：

<div style="width: 100px; word-break: break-all;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Answer 2

使用样式属性“自动换行：break-word ”你将获得一个没有溢出的多行字符串。

问候

Answer 3

不确定您的要求。如果使用您的代码，长文本将显示为多行文本，默认情况下它不会水平溢出。

Answer 4

方式

我解决这个问题的方法是在你的div中放置ap标签，样式是这样的，它有一个宽度，浮动并且显示设置为阻塞，这应该可以解决你的问题，这不包括任何jQuery所以它会减少客户端的加载时间。

示例：

HTML：

<div class="container"> <p> Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... </p> </div>

CSS：

.container { float:left; width:500px; background-color:#000000; } .container p { float:left; width:500px; display:block; color:#FFFFFF; }

JSFIDDLE：http://jsfiddle.net/8WP4J/

<强>来源：

使用HTML和CSS解决类似问题的一般知识

希望这有帮助，任何问题，请随时发表评论。

Answer 5

让我告诉你所有代码......

HTML代码：

<table class="tbl">
    <tr>
        <td><div>Header Codes ans CSS Comes Here</div></td>
        <td><p>Too Long String...</p></td>
    </tr>
</table>

和CSS代码：

.tbl {
    table-layout:fixed;
    width: 568px;
}
.tbl td {
    border:1px solid #C93;
}

结果是这样的：http：//www.4ul.com/uploads/Capture[1].JPG 我们太长的字符串超出了表格宽度（如果我们设置p标签的大小，没有任何改变......）

通过插入分隔线防止文本溢出

5 个答案: