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

【问题标题】：Word-wrap: break-down not working. Text overflow issue in draggable element自动换行：分解不起作用。可拖动元素中的文本溢出问题
【发布时间】：2017-03-02 03:29:29
【问题描述】：

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

是否可以隐藏 text-canvas 的字母，使超出 image-canvas 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% 解决了这个问题。但是我 不要认为是一个好方法。请提出正确的方法。

【问题讨论】：

标签： javascript jquery html css draggable


【解决方案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 位）：

  • 铬 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;
}

代码片段：

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 设置的值。

在demo中，图片很小，font-size也可以 大，使其容器尺寸超过其父级，确保 在生产中控制它。

代码片段：

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>

【讨论】：

  • +1 为您的回答朋友。赞成票。但是我在您作为示例给出的 js fiddle 中发现了同样的情况。现在没有出现在右侧边框的文本。但它会延伸到底部边框。
  • 请检查这个问题stackoverflow.com/questions/41276905/…
【解决方案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>

【讨论】：

    【解决方案3】：

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

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

    【讨论】：

    • 嗨。谢谢你，朋友 。但我已经应用了 word-break: break-all; .请阅读我的问题。
    【解决方案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>

    【讨论】：

      【解决方案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>

      【讨论】：

        猜你喜欢
        • 2012-05-06
        • 2023-04-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-09-27
        • 2019-01-18
        • 2010-10-23
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode