文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >换行:分解不起作用。可拖动元素中的文本溢出问题

问换行:分解不起作用。可拖动元素中的文本溢出问题
EN

Stack Overflow用户
提问于 2016-10-20 16:26:50
回答 5查看 1.7K关注 0票数 18

请帮助解决此问题。目前我有一个div，它是可拖动的，里面的文本是可编辑的。在这里，用户可以使用输入类型范围来更改文本大小。

是否可以隐藏文本画布的字母，以便超出图像画布div边界的字母到达col-sm-8

在这里，当用户输入没有空格的文本时，该单词就会超出col-sm-8的范围。如何解决这个问题？我使用overflow:hidden和word-wrap:breakdown，但它不工作。

​

​

代码语言：javascript
复制
function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
代码语言：javascript
复制
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}
代码语言：javascript
复制
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="img.png">
      </div>

    </div>
  </div>
</div>

​

然后我使用了.text-canvas{ word-break: break-all; }。现在，文本不会移出col-sm-8，但它仍然会移出image-div。

​

​

更新：目前我使用padding-right:10%解决了这个问题。但我不认为这是一个好方法。请建议正确的方法。

javascript
jquery
html
css
draggable
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2016-10-29 00:05:21

解决方案：

您需要在.parent-canvas类中使用以下属性：

代码语言：javascript
复制
.parent-canvas {
  display: inline-block; /* Display inline but retain the block-level characteristics */
  overflow: hidden; /* Hide the text if it overflows the container */
  position: relative; /* Text is removed from the normal flow with absolute position, use this to contain it */
}

在此之后，您有两个选项，在.text-canvas类中使用或：

代码语言：javascript
复制
.text-canvas {
  word-break: break-all;
}

代码片段：

​

代码语言：javascript
复制
function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
代码语言：javascript
复制
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}
.parent-canvas {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  word-break: break-all;
}
.image-canvas img {
  vertical-align: middle;
}
代码语言：javascript
复制
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="http://placehold.it/100x100">
      </div>

    </div>
  </div>
</div>

​

或

代码语言：javascript
复制
.text-canvas {
  max-width: 100%;
}

代码片段：

​

代码语言：javascript
复制
function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
代码语言：javascript
复制
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}
.parent-canvas {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  max-width: 100%;
}
.image-canvas img {
  vertical-align: middle;
}
代码语言：javascript
复制
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="http://placehold.it/100x100">
      </div>

    </div>
  </div>
</div>

​

如果您愿意，也可以同时使用这两种方法，因为它们不会相互干扰：

代码语言：javascript
复制
.text-canvas {
  word-break: break-all;
  max-width: 100%;
}

代码片段：

​

代码语言：javascript
复制
function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
代码语言：javascript
复制
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}
.parent-canvas {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  word-break: break-all;
  max-width: 100%;
}
.image-canvas img {
  vertical-align: middle;
}
代码语言：javascript
复制
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      ttttttttttttttttttttttttttttttttttttttt
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="http://placehold.it/100x100">
      </div>

    </div>
  </div>
</div>

​

jsFiddle

测试：

Windows 10 (64位)：

  • Chrome 54.0.2840.71 m
  • FireFox 49.0.2
  • 边缘Chrome

IOS 10.1：

  • iPhone6 Safari移动

可能的UX改进：

在我看来，用户体验的一点改进，至少对于Chrome和FF来说，可以添加cursor: grab;和cursor: grabbing;属性，让用户知道它是一个可拖动的元素。

在我贴出这个答案后，我不知道这是一个可拖拽的项目。我想我没有真正注意到整个问题...人们倾向于快速地与事物互动。

您需要决定cursor: text;是否比grab和grabbing更好。

添加到jQuery可拖动类的属性：

代码语言：javascript
复制
.ui-draggable {
  cursor: -webkit-grab;
  cursor: grab;
}
.ui-draggable-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

代码片段：

​

代码语言：javascript
复制
function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
代码语言：javascript
复制
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}
.parent-canvas {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  word-break: break-all;
  max-width: 100%;
}
.image-canvas img {
  vertical-align: middle;
}
.ui-draggable {
  cursor: -webkit-grab;
  cursor: grab;
}
.ui-draggable-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
代码语言：javascript
复制
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="http://placehold.it/100x100">
      </div>

    </div>
  </div>
</div>

​

备注：

要删除vertical-align: middle;.元素下不需要的空格，请使用属性

编辑：

若要防止在增加font-size时文本垂直溢出，需要将height: auto;设置为.text-canvas类。

你可以用不同的方式做到这一点，你可以这样做：

代码语言：javascript
复制
$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css({
    'font-size': v + 'px',
    'height': 'auto'
  });
});

这将设置auto值覆盖由jQuery UI设置的值。

在演示中，图像非常小，字体大小可能会变得太大，使其容器尺寸超过其父容器的尺寸，请确保在生产中控制这一点。

代码片段：

​

代码语言：javascript
复制
function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css({
    'font-size': v + 'px',
    'height': 'auto'
  });
});
代码语言：javascript
复制
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}
.parent-canvas {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  word-break: break-all;
  max-width: 100%;
}
.image-canvas img {
  vertical-align: middle;
}
.ui-draggable {
  cursor: -webkit-grab;
  cursor: grab;
}
.ui-draggable-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
代码语言：javascript
复制
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="http://placehold.it/100x100">
      </div>

    </div>
  </div>
</div>

​

票数 3
EN

Stack Overflow用户

发布于 2016-10-25 03:44:53

将.parent-canvas的尺寸设置为与图像相同，然后使用overflow: hidden和position-relative来包含绝对定位的文本。

代码语言：javascript
复制
.parent-canvas {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

​

代码语言：javascript
复制
function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
代码语言：javascript
复制
.parent-canvas {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}
代码语言：javascript
复制
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="http://placehold.it/300x200">
      </div>

    </div>
  </div>
</div>

​

票数 2
EN

Stack Overflow用户

发布于 2016-10-20 22:12:30

您需要https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

代码语言：javascript
复制
word-break: break-all;

​

代码语言：javascript
复制
function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});
代码语言：javascript
复制
.text-canvas {
  z-index: 1;
  position: absolute;
  word-break: break-all;
}
.imageupload {
  z-index: -1;
}
.parent-canvas {
  position: relative;
}
代码语言：javascript
复制
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="img.png">
      </div>

    </div>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40149208

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档