Javascript 如果文本显示在容器外部，则隐藏文本

我们正在通过获取json来显示文本

单击文本，我们允许用户添加更多文本

问题：

添加的文本应仅显示在容器内，如果文本超出容器，则应隐藏为，但现在文本显示在容器外，如下面的代码所示

让jsonData={
“层”：[{
“x”：0，
“高度”：300，
“层”：[
{
“对正”：“中间”，
“字体”：“库斯塔黑”，
“x”：190，
“y”：150，
“src”：“0a7fb3015bb19745da114bc581e96947_Font248.ttf”，
“宽度”：72，
“类型”：“文本”，
“颜色”：“红色”，
“尺寸”：32，
“文本”：“日期”，
“高度”：17，
“名称”：“编辑日期”
}
],
“y”：0，
“宽度”：300，
“类型”：“组”，
“名称”：“fb\U post\U 4”
}]
};
const containerElement=$（“#container”）；
常量fileUp=$（“#fileUp”）；
$（函数（）{
//忽略下面的代码
//从json文件获取文本
函数getAllSrc（层）{
设arr=[]；
layers.forEach（层=>{
if（layer.src）{
arr.push({
src:layer.src，
x:layer.x，
y:图层，y，
高度：layer.height，
宽度：layer.width，
名称：layer.name
});
}else if（layer.layers）{
设newArr=getAllSrc（layer.layers）；
如果（newArr.length>0）{
纽瓦尔·弗雷赫(({
src，
x,，
Y
高度，
宽度，
名称
}) => {
arr.push({
src，
x：（层x+x），
y：（图层y+y），
高度，
宽度，
姓名：（姓名）
});
});
}
}
});
返回arr；
}
函数json（数据）
{
var宽度=0；
var高度=0；
设arr=getAllSrc（data.layers）；
让layer1=data.layers；
宽度=第1层[0]。宽度；
高度=第1层[0]。高度；
设计数器=0；
设table=[]；
//容器尺寸
containerElement.css（'width'，width+“px”）.css（'height'，height+“px”）.addClass（'temp'）；
//结束
让{
src，
x,，
Y
名称
}（arr）{
var imageUrl1=''；
变量掩码=$（“.container”）.mask({
imageUrl:imageUrl1，
//获取掩码图像
maskImageUrl:'http://piccellsapp.com:1337/parse/files/PfAppId/“+src，
//结束
onMaskImageCreate:函数（img）{
//遮罩图像位置
img.css({
“位置”：“绝对”，
“左”：x+“px”，
“顶部”：y+“px”
});
//结束
},
id:柜台
});
表.推（掩模）；
fileup.onchange=函数（）{
设mask2=表[目标]；
const newImageLoadedId=mask2.loadImage（URL.createObjectURL（fileup.files[0]）；
document.getElementById（'fileup'）。value=“”；
};
计数器++；
}
//正文
绘图文本（数据）；
}
json（jsonData）；
}); // 功能结束
//忽略上面的代码
//获取文本
常量字体=[]；//缓存重复字体
函数drawText（层）{
if（layer.type==='image'）返回；
如果（！layer.type | | layer.type==='group'）{
返回layer.layers.forEach（drawText）
}
如果（layer.type==='text'）{
常量url=https://i.imgur.com/'+layer.src；
如果（！font.includes（url））{
字体。推送（url）；
$（“样式”）.prepend（“@font-face{\n”+
“\t字体系列：\”“+layer.font+”\”；\n”+
“\tsrc:url（“+url+”）格式（'truetype'）；\n”+
"}");
}
//下面是文本代码
常量lightId='light'+layer.name
常量lightIdString='#'+lightId
$（'.container'）。追加(
“将
溢出：隐藏；
添加到
.container
中

.container{
背景：银；
位置：相对位置；
溢出：隐藏；
}
将
溢出：隐藏；
添加到
.container
中

.container{
背景：银；
位置：相对位置；
溢出：隐藏；
}
您的标记错误

<a id="edit_date" <div="" class="txtContainer" contenteditable="true" style="left: 190px; top: 150px; font-size: 32px; ">DAdTE</a>

您的标记错误

<a id="edit_date" <div="" class="txtContainer" contenteditable="true" style="left: 190px; top: 150px; font-size: 32px; ">DAdTE</a>

只需使用
容器div中的
溢出：隐藏
即可使用该
更改css。白色内容{显示：无；宽度：70%；高度：40%；填充：16px；边框：16px纯橙色；背景色：白色；z索引：1002；溢出：自动；}
只需使用
容器div中的
溢出：隐藏
即可使用该
更改css。白色内容{显示：无；宽度：70%；高度：40%；填充：16px；边框：16px纯橙色；背景色：白色；z索引：1002；溢出：自动；}
谢谢，它工作得很好，但是如果我们使用
溢出：隐藏
，当用户单击文本时，我们也会显示弹出窗口，该弹出窗口将不会完全显示……尝试将弹出窗口移到co外部