我在页面上有一组块元素.它们都具有CSS规则white-space,overflow,text-overflow set,以便修剪溢出的文本并使用省略号.

但是,并非所有元素都溢出.

无论如何,我可以使用javascript来检测哪些元素溢出？

谢谢.

补充:我正在使用的示例HTML结构.

<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>

SPAN元素始终适合单元格,它们应用了省略号规则.我想检测省略号何时应用于SPAN的文本内容.

如何检测文本是否溢出？例如,以下文本比div容器允许的长.如何在javascript中检测到这一点？

<div style="max-width: 100px; white-space:nowrap; overflow: hidden;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>

如何检测div元素中的垂直文本溢出？

CSS:

div.rounded {
   background-color:#FFF;
   height: 123px;
   width:200px;
   font-size:11px;
   overflow:hidden;
}

HTML:

<div id="tempDiv" class="rounded">
    Lorem ipsum dolor sit amet,
    consectetur     adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet. 
</div>

请看下面的小提琴https://jsfiddle.net/27x7rvx6

CSS(#test是flexbox容器,.items是它的子容器):

#test {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 300px;
  margin-left: 150px;
  border: 2px solid red;  
}
.item {
  flex: 0 0 70px;
  margin-right: 10px;
  background: blue;
  height: 70px;
  border: 2px solid black;
}

有一个nowrap带有固定大小项目的line()flexbox.容器已justify-content设置为center.因为物品不能收缩并且比容器更宽,所以它们开始溢出.

我的问题是内容溢出到左侧和右侧.有没有办法让内容合理化为中心,但一旦它开始溢出使其行为就像justify-content属性设置为flex-start,resp.使它只溢出到容器的右边？

我试图找出 div 是否有溢出文本，show more如果有则显示链接。我找到了这个 stackoverflow 答案来检查 div 是否溢出。根据这个答案，我需要实现一个函数，它可以访问相关元素的样式，并进行一些检查以查看它是否溢出。如何访问元素的样式。我尝试了2种方法

1. 使用参考

import React from "react";
import "./styles.css";

export default function App(props) {
  const [showMore, setShowMore] = React.useState(false);
  const onClick = () => {
    setShowMore(!showMore);
  };

  const checkOverflow = () => {
    const el = ref.current;
    const curOverflow = el.style.overflow;

    if ( !curOverflow || curOverflow === "visible" )
        el.style.overflow = "hidden";

    const isOverflowing = el.clientWidth < el.scrollWidth 
        || el.clientHeight < el.scrollHeight;

    el.style.overflow = curOverflow;

    return isOverflowing;
  };

  const …

我正在为Android构建一个电子书阅读器.电子书的内容通常分为html文件(epub),其中包含一个或多个章节.

我打算建立一个电子书阅读器,将这些文件的内容分成不同的"页面".问题是要知道一页上有多少文本"适合"并计算正确的页面数量,因为这取决于许多不同的因素,例如:字体大小,字号,段落,图像,分页符,头条新闻等

理想我会让我的文本合理和可选择,因为普通的TextView或EditText是不可能的,我必须使用不可滚动的WebView.

总而言之,我如何"测量"适合我的WebView上一个"页面"的文本数量？或者有更好的方法来解决这个问题吗？我看到Paint类支持measure文本和breakText.

谢谢!

我想创建一个响应,移动优化的阅读体验类似于epub/ebook阅读器,如Kindle应用程序,或iBooks,使用动态HTML作为源.

想象一篇长篇文章或博客文章,需要大量垂直滚动才能阅读,特别是在小型移动设备上.我想要做的是将长页面分成多个全屏幕部分,允许用户使用左/右导航箭头和/或滑动手势来"翻阅"整篇文章.

有许多可用的JS库可以创建预定义幻灯片的"幻灯片放映"或"转盘"(使用div或其他容器元素).但是我希望文本和html内容能够动态地重新流动以适应任何设备视口并且仍然可读...就像一个epub/ebook用户界面,如Kindle应用程序或iBooks.因此,对于同一篇文章,手机上会有比平板电脑或桌面视口更多的"页面",如果/当视口大小发生变化时,需要动态创建/调整这些"页面"(比如在移动设备上从纵向切换到横向).

以下是javascript .epub阅读器的示例:epub.js

...注意响应行为.调整视口大小时,所有文本都会重新流动以适应可用空间,增加或减少"页面"的总数.问题是epub.js需要.epub文件作为其源.

我想要的是html页面的相同用户界面和功能.

我搜索并搜索了某种可以开箱即用的库,但却找不到任何东西.

我意识到我可以使用转换脚本将我的html页面转换为.epub文件,然后使用epub.js在浏览器中呈现该文件,但这看起来非常圆润且笨重.使用html作为直接来源,渲染/模仿客户端响应电子书用户体验,模仿或模拟.epub读者用户体验会好得多.

有谁知道这样的事情是否已经存在,或者我怎么能自己建造它？

关键功能是动态/响应式文本重排.当视口尺寸减小时,文本/内容需要回流到下一个"页面"以避免任何垂直滚动的需要.我不知道如何有效地做到这一点.如果我自己编写代码,我可能会使用类似jQuery Columnize插件的东西,将所有列设置为width: 100vw; height: 100vh,以便每列都像一个"页面",然后找出如何在这些"页面"之间创建一个滑动UI.

任何帮助深表感谢!

有没有办法有条件地将特定样式应用于元素溢出？

例如，如果我说：

<div>
    This text is very long, no really it is extremely long; it just goes on and on and on and on. You might say it's a bit like the Duracell(R) bunny, but without the batteries, and the floppy ears.
</div>

和

div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// TODO: is there any way to only apply this rule if the text is overflowing?
div {
    background-color: red;
}

有没有办法使用纯 CSS 使背景颜色：红色规则仅在文本溢出时适用？

注意：我可以看到一种使用 javascript 执行此操作的方法；我只是想知道是否有一个纯 …

需要制作具有以下功能的模板:

• 包含两个容器(行)
  • 顶行是固定大小
  • 底部尺寸适合最大可用垂直空间
• 应该动态调整底部容器内的文本(字体大小)以适应容器高度.

第一个问题的答案很简单,但在这里添加它,因为不知道第二个问题不依赖于它.

这里有很多问题,询问如何动态调整textarea或输入字段中的文本.但这个问题更为特殊,因为可能需要计算单词或其他一些以适应容器大小.

有人可以帮我提一下已经完成的jquery或任何其他js/css解决方案吗？

我不是一个网页设计师,只想制作一个简单的网页模板,用于调整我的文本 - 我知道一点点css - 但不是javascript - 因此要求指向任何"准备运行"的解决方案,如果存在......

编辑

检查溢出解决方案,这个答案/sf/answers/499728001/可以很好地检测垂直溢出.现在的问题是,如何将上面的溢出javascript检查添加到循环中,什么会将我的字体更改为更小.

为了更好地说明附加两个演示图像......

我很确定这只是html/css是不可能的,但我想问以防万一.假设我在<div>里面<td>,div有overflow: hidden;风格.我希望:而不是仅仅被切断的溢出:

1. 检测是否有溢出.
2. 通过删除div内容的最后3个字母进行反应,并在末尾添加"...".

编辑:我最初在问这个问题时错过了一个关键细节 - 这可能与overflow-y有关,所以在生成"..."之前我仍然可以有多行文本吗？

PLNKR用于测试

我一直在创建一个在浏览器中运行的专用文本编辑器.我有一个让我陷入昏迷的问题.如何在Google文档中检测并将长文本分割成单独的页面？我知道谷歌文档不能通过满足,但必须有一些解决方案......

Edit1:我们需要考虑几个场景:

1. 我们通过json对象加载文档,然后渲染我们的页面.
2. 我们正在键入文本并到达页面末尾.
3. 我们删除了该文本.
4. 我们插入或删除一段文字.

https://googleblog.blogspot.ru/2011/04/pagination-comes-to-google-docs.html

page.html中

<div class="box-base">
    <div id="page-1" class="page">
         <div id="editable-1" class="document" contenteditable="true"></div>
    </div>
    <div id="page-2" class="page">
         <div id="editable-2" class="document" contenteditable="true"></div>
    </div>
</div>

styles.css的

.box-base {
    margin-left: 50px;
    flex: 1 0 430px;
    border-style: solid;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 900px;
    overflow: auto;
}
.page {
    width: @page-width;
    height: @page-width * 1.414;
    /*overflow-y: auto;*/
    background: white;
    margin: 25px 0 25px 0;
}
.document {
  /*max-height: 1000px;*/
  overflow: hidden;
}

我有一个<p>标签<div>,我在其中设置了以下属性:

div {
   height: 105px;
   width: 60px;
   overflow: hidden;
}

如果<p>标签包含大量文本,则其中一些文本将被截断.

我的目标是检测未显示的第一个单词是什么.

例如,在以下场景中:

div {
  height: 105px;
  width: 60px;
  overflow: hidden;
}

<div>
   <p>People assume I'm a boiler ready to explode, but I actually have very low blood pressure, which is shocking to people.</p>
</div>

该函数将返回单词"explode".

我从这个问题中得知,检测是否存在溢出很容易,但是我们可以更进一步检测哪个词是第一个被隐藏的吗？

我想扩展一下Shog9的答案

如何从javascript确定html元素是否有溢出的内容

我想知道隐藏的文本是在包含元素的顶部还是底部(或两者都没有).

最好的方法是什么？