自动换行:分解不起作用.draggable元素中的文本溢出问题

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但它仍然在图像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 */
}

之后，您有两个选择，在您的班级中使用word-break或：max-width.text-canvas

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

代码片段：

.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: 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 {
  max-width: 100%;
}

代码片段：

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

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

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

jsFiddle

测试：

Windows 10（64 位）：

• 铬 54.0.2840.71 m
• 火狐浏览器 49.0.2
• 边缘25.10586.0.0

iOS 10.1：

• iPhone 6 Safari 移动版

可能的用户体验改进：

在我看来，至少对于 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;
}

代码片段：

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

笔记：

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

编辑：

为了防止增加时文本垂直溢出font-size，需要设置height: auto;为.text-canvasclass。

您可以通过不同的方式来做到这一点，其中一种可能是这样做：

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

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

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

代码片段：

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

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