相关疑难解决方法(0)

StackOverflow上有几个关于offsetWidth/clientWidth/scrollWidth(和-Height)的问题,但没有一个问题可以全面解释这些值是什么.

此外,网上有几个来源,提供令人困惑或不正确的信息.

你能给出一个完整的解释,包括一些视觉提示吗？另外,如何使用这些值来计算滚动条宽度？

是否有任何使用纯HTML和CSS截断文本的好方法,以便动态内容可以适应固定宽度和高度的布局？

我已经截断由服务器端的逻辑宽度(即一个盲目猜测的字符数),但由于一个"W"是比更宽的"i"这倾向于是次优的,并且还需要我重新猜测(并保持调整)每个固定宽度的字符数.理想情况下,截断将在浏览器中发生,浏览器知道渲染文本的物理宽度.

我发现IE有一个text-overflow: ellipsis属性正是我想要的,但我需要这个是跨浏览器.这个属性似乎(有些？)标准但Firefox不支持.我发现各种 解决方法基础上overflow: hidden,但他们要么不显示省略号(我希望用户知道的内容被截断),或显示这一切的时候(即使内容没有截断).

有没有人有一个很好的方法来适应固定布局中的动态文本,或者是服务器端截断的逻辑宽度和我现在要获得的一样好？

我的页面中包含省略号的动态数据.含义:

.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

并且我想添加具有相同内容的此元素工具提示(title ='$ {myData}')但我希望它仅在内容很长并且省略号出现在屏幕上时才会出现.
有什么办法吗？

一个方向 - 当浏览器(在我的情况下是IE)绘制省略号时 - 它会抛出一个关于它的事件吗？

如果HTML元素溢出其内容,我可以使用JavaScript检查(无论滚动条)吗？例如,一个长小的固定大小的div,溢出属性设置为可见,并且元素上没有滚动条.

我正在阅读两个css属性之间的区别display:none,visibility:hidden并遇到了DOM reflow term.

声明是

display: none导致DOM重排哪里visibility: hidden没有.

所以我的问题是:

什么是DOM回流及其工作原理？

我正在使用jQuery(v1.7.1),我需要得到一个元素的绝对浮点宽度,但所有jQuery的宽度方法似乎都是对宽度值进行四舍五入.

例如,如果元素的实际宽度是20.333333px,则jQuery的width方法返回20,即忽略小数值.

你可以在这个jsFiddle上看到我的意思

所以,我的问题是:如何获得元素宽度的浮点值？

我正在尝试使用 JS 检测文本是否被截断。除了下面的边缘情况外，这里提到的解决方案效果很好。您会注意到，如果文本在视觉上被截断，鼠标悬停的第一个块将返回 false。

function isEllipsisActive(e) {
  return (e.offsetWidth < e.scrollWidth);
}

function onMouseHover(e) {
  console.log(`is truncated: ${isEllipsisActive(e)}`);
}

div.red {
  margin-bottom: 1em;
  background: red;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 300px;
  cursor: pointer;
}

<h6>Hover mouse and watch for console messages.</h6>

<!-- should return true -->
<div class="red" onmouseover="onMouseHover(this)">
  <a>Analytics reports comes through garbled. Plsss</a>
</div>

<!-- should return true -->
<div class="red" onmouseover="onMouseHover(this)">
  <a>Analytics reports comes through garbled. Plsssssss</a>
</div>

<!-- should return …

我有一个跨度的动态文本。我想用line-clamp: 2.

在这种情况下，有最大值。2 行文本，其余文本被 截断…。

这适用于：

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

我的问题：如果内容被截断，则应显示工具提示。如何检测文本是否被夹住？

元素的高度是一样的，innerHTML是一样的......我没有更多的想法......

寻找一种方法，使 material-ui 的工具提示仅在文本被省略号（溢出）截断时才展开表格单元格中的文本。

目前在我的表中，我有一个这样的单元格：

<TableCell className={classes.descriptionCell}>{row.description}</TableCell>

我的 descriptionCell 样式是这样的：

    descriptionCell: {
        whiteSpace: 'nowrap',
        maxWidth: '200px',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    }

这使得文本在这个表格中表现得像我希望的那样，但我希望能够悬停并在工具提示中查看它的其余部分，最好是 Material-UI 的内置工具提示组件。

我知道这里有一个包https://www.npmjs.com/package/react-ellipsis-with-tooltip应该这样做，但它使用引导工具提示，而不是材料 UI。

我有一个带有一些文本的div,它最初不会换行并显示省略号但是我想让用户能够点击一个更多的阅读选项,然后展开div来显示整段文本.

但是,我希望能够检测文本是否足够小以适应div而无需从一行扩展它,如果是这样,则隐藏show more选项.

这是一个改进的JS Fiddle的链接,我一直在努力:

http://jsfiddle.net/M2APS/44/

而它的代码:

HTML:

$(document).bind('pageshow', function() {
  $(".text-size").click(function() {
    $(".ui-li > div").toggleClass("less");
    if ($(".text-size").html() == "Read more...") {
      $(".text-size").html("Read less...");
    } else {
      $(".text-size").html("Read more...");
    }
  });
});

CSS:

.less {
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.more {
  white-space: normal;
}

.text-size {
  display: block;
  text-align: right;
  padding-top: 10px;
  color: blue !important;
  cursor: pointer;
}

JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-role="page" id="p1">
  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">Item Title</li>
      <li>
        <div class="less"> …