ゲームボーイ Web ゲーム (なぞなぞ Web ゲーム) - フロントエンド ページのデザインと WeChat の chat_javascript スキルを模倣することの難しさ

<div>
<img src="" alt="ゲームボーイ Web ゲーム (なぞなぞ Web ゲーム) - フロントエンド ページのデザインと WeChat の chat_javascript スキルを模倣することの難しさ"/> <div>消息内容</div>
</div>

function GetCurrentStrWidth(text, font) {
var currentObj = $('<pre class="brush:php;toolbar:false">').hide().appendTo(document.body);
$(currentObj).html(text).css('font', font);
var width = currentObj.width();
currentObj.remove();
return width;
}

 タグを巧みに追加または削除して、<pre class="brush:php;toolbar:false"> の実際の長さ、つまりテキストの長さを返します。</div>
<p>
<br /> デフォルトの max-width より小さい値の場合、テキスト領域 div をデフォルトにすることができます。デフォルトの max-width より大きい値の場合、テキスト領域 div は width=max-width に設定されます。</p>
<p>
</p>
<div class="jb51code">
<pre class="brush:java;">
var maxWidth = 320;
var currentFont = "normal 13px Helvetica, Arial, sans-serif";
msgDiv.style.font = currentFont;
var currentWidth = GetCurrentStrWidth(message, currentFont);
// *) 设定文本区域的宽度
if (currentWidth <= maxWidth) {
　　msgDiv.style.width = "" + currentWidth + "px";
} else {
　　msgDiv.style.width = "" + maxWidth + "px";
}

word-break: normal|break-all|keep-all;


值 描述

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
　　为了防止太长的英文单词(非常规词)的影响, 最后选用了word-break: break-all.
　　• 滚动支持
　　滚动支持, 相对简单, 只需要聊天对话框在y轴方向设定如下css属性即可:

overflow-y : scroll;

　　• 底部自动对齐
　　这个也是老生常谈的事了, 每次聊天窗口的内容有更新, 执行如下js代码即可.

div.scrollTop = div.scrollHeight;
　　注: 既scrollTop和scrollHeight属性值保持一致即可.
　　• Enter键响应捕获
　　对enter键响应的支持, 添加如下监听事件函数即可.

document.addEventListener("keydown", function (evt) {
　　if (evt.keyCode == 13) {
　　　　// TODO
　　}
});