解决方案：

Question

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

是否可以隐藏文字画布的字母，以便字母超出图片画布div的边框并到达col-sm-8？

当用户在没有空格的情况下写文本时，该单词超出了col-sm-8。怎么解决这个？我使用overflow:hidden和word-wrap:breakdown，但它不起作用。

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');
});

.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}

<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%解决了这个问题。但是我不要以为是一个好方法。请提出正确的方法。

Answer 1

解决方案：

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

.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课程中使用word-break或 max-width 两个选项：

.text-canvas {
  word-break: break-all;
}

代码段：

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');
});

.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;
}

<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>

或

.text-canvas {
  max-width: 100%;
}

代码段：

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');
});

.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;
}

<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>

如果您愿意，也可以同时使用它们，它们不会相互干扰：

.text-canvas {
  word-break: break-all;
  max-width: 100%;
}

代码段：

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');
});

.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;
}

<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
Edge 25.10586.0.0

IOS 10.1：

Iphone 6 Safari Mobile

可能的用户体验改进：

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

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

您需要确定cursor: text;是否优于grab和grabbing。

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

.ui-draggable {
  cursor: -webkit-grab;
  cursor: grab;
}
.ui-draggable-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

代码段：

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');
});

.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;
}

<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>

备注：

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

编辑：

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

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

$("#fontsize").on("change", function() { var v = $(this).val(); $('.text-canvas').css({ 'font-size': v + 'px', 'height': 'auto' }); });

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

在演示中，图像非常小，字体大小也可以大，使其容器尺寸超过其母体，确保在生产中控制它。

代码段：

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' }); });

.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; }

<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>

Answer 2

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

.parent-canvas {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

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');
});

.parent-canvas {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
}

<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>

Answer 3

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

Zend_Db_Table_Abstract

word-break: break-all;

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');
});

.text-canvas {
  z-index: 1;
  position: absolute;
  word-break: break-all;
}
.imageupload {
  z-index: -1;
}
.parent-canvas {
  position: relative;
}

Answer 4

使用text-overflow: ellipsis;或text-overflow: clip;它会隐藏溢出文本。

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');
});

.text-canvas {
  z-index: 1;
  position: absolute;
   text-overflow:  clip;/*ellipsis,initial*/
  white-space: nowrap;
  overflow: hidden;
   width:3em;/*image div width*/
}
.imageupload {
  z-index: -1;
}

<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>

Answer 5

父母

.parent-canvas{
  display: inline-block;  
  overflow: hidden;
  position: relative;
}

儿童（文字画布）

.text-canvas {
  word-break: break-all;
}

<强>演示

- 为了更好的演示目的添加背景颜色

- 修改字体大小

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("input change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});

.text-canvas {
  z-index: 1;
  position: absolute;
  word-break: break-all;
}
.imageupload {
  z-index: -1;
}
.col-sm-6 {
  background: red;  
}
.c {padding: 5px;}
.parent-canvas{
  background: orange;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.text-canvas {
  background: yellow;
  min-width: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="c col-sm-2">
  <div name="anotherdiv" style="display:flex">
    <div>8px</div>
    <input type="range" min="8" max="30" id="fontsize">
    <div>30px</div>
  </div>
</div>
<div class="c col-sm-12"></div>
<div class="c col-sm-6">
  <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://lorempixel.com/150/150/">
      </div>
    </div>
  </div>
</div>

自动换行：分解不起作用。可拖动元素

5 个答案:

解决方案：

代码段：

jsFiddle

测试：

可能的用户体验改进：

编辑：