相关疑难解决方法(0)

同

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

如果溢出,"......"将显示在行尾.但是,这只会在一行中显示.但我希望它以多行显示.

它可能看起来像:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.

我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.

观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？

我不能用overflow-x: hidden.

的jsfiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div> …

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

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

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

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

有没有解决方案在div中的最后一行添加省略号,流体高度(20%)？

我-webkit-line-clamp在CSS中找到了这个函数,但在我的例子中,行号将取决于窗口大小.

p {
    width:100%;
    height:20%;
    background:red;
    position:absolute;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. …

如何制作我的弹性项目(article在本例中),它flex-grow: 1; 不会溢出它的flex父/容器(main)？

在这个例子article中只是文本,虽然它可能包含其他元素(tables等).

main, aside, article {
  margin: 10px;
  border: solid 1px #000;
  border-bottom: 0;
  height: 50px;
}
main {
  display: flex;
}
aside {
  flex: 0 0 200px;
}
article {
  flex: 1 0 auto;
}

<main>
  <aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x …

我已经看到了使用JavaScript检测和处理溢出HTML元素的文本的建议.但它是2013年,所以我想知道CSS规范是否有办法检测溢出本身.

换句话说,如果我有一个固定大小的div:

<div class="smart-warning" style="width:200px; height:20px; overflow:hidden">
This is my very long text that would overflow the box.
</div>

如果文本溢出,我希望有一种风格可以做到:

<style>
.smart-warning {
  border:1px solid black
}
.smart-warning:overflowing {
  border:1px solid red
}
</style>

看起来我们真的很接近在CSS中使用这样的东西但是超出规格并不是我的游戏.

如果它不存在,你认为它会有用吗？

谢谢!

我是 tailwindcss 的新手。但我这里有一个问题。

查看屏幕截图，背景颜色未应用于导航栏中。此外，整个 html 正文在中小屏幕上并没有获得全宽。

我不明白的是，我仍然没有使用 tailwindcss 中的任何响应类，如 md、sm 或 lg。但宽度存在严重问题，我尝试使用 w-full 和 w-screen 的顺风类。它们都不起作用。这是问题的截图

您可以在这里找到代码：https ://codesandbox.io/s/focused-curran-jdyup

提前致谢。

编辑：

好的，看看这个 GIF，伙计们。

我正在尝试在 Tailwind Play 中重现该问题。但我不能。然后我注意到同一行代码在 Tailwind Play 中完美运行，但在 nextjs 中却不起作用。我不知道这里的问题是什么，但我在下面分享了 Tailwind Play 和 NextJS 代码。顺风玩法：

<div class="flex justify-between items-center p-5 bg-indigo-800 text-white">
      <div class="ml-16">
        <div class="flex items-center">
          <div class="">
            <h4 class="tracking-widest uppercase">GrayScale</h4>
          </div>
          <div class="lg:hidden">
            <button
              type="button"
              class="text-gray-400 mt-1 hover:text-white focus:text-white focus:outline-none"
            >
              <svg
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2" …

我有一个表,我想知道如何限制<td>条目中显示的字符数,以便如果超过限制,则显示"...",可能允许用户单击它以进行扩展.

<table st-table="displayedCollection" st-safe-src="main.quizCollection" class="table table-striped table-condensed table-bordered" ng-show="main.tab === 'active'">
        <thead>
            <tr>
                <th st-sort="Internal.quizName">Name</th>
                <th st-sort="Internal.description">Description</th>
                <th st-sort="Internal.dateCreated">Date Created</th>
                <th st-sort="Internal.timesTaken">Times Taken</th>
                <th>URL</th>
                <th>View More</th>
                <th>Copy</th>
                <th>Export</th>
                <th>Deactivate</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="quiz in displayedCollection | filter:'active': true">
                <td>{{quiz.Internal.quizName}}</td>
                <td>{{quiz.Internal.description}}</td>
                <td>{{quiz.Internal.dateCreated}}</td>
                <td>{{quiz.Internal.timesTaken}}</td>
                <td><button class="btn btn-default" clip-copy="main.copyURL(quiz)"><i class="fa fa-share-square-o"></i></button></td>
                <td><a href="#/view-more/{{quiz.$id}}" class="btn btn-info"><i class="fa fa-eye"></i></a></td>
                <td><a href="#/copy/{{quiz.$id}}" class="btn btn-default"><i class="fa fa-clipboard"></i></a></td>
                <td><button class="btn btn-default" ng-csv="main.export(quiz)" csv-header="main.csvHeader" lazy-load="true" filename="{{quiz.Internal.quizName}}.csv"><i class="fa fa-floppy-o"></i></button></td>
                <td><button class="btn btn-danger" ng-click="main.deactivate(quiz)"><i class="fa fa-ban"></i></button></td>
            </tr>
        </tbody> …

我不能text-overflow: ellipsis上班,我希望有人能发现我找不到的错误.这是我的代码:

HTML:

<div class="out">
    <div class="in1"></div>
    <div class="in2">some long random text which should not fit in here</div>
</div>

CSS:

* {
    box-sizing: border-box;
}

.out {
    display: block;
    height: 60px;
    width: 250px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    color: #000;
    background: lightgreen;
}

.in1 {
    height: 60px;
    width: 60px;
    padding: 10px;
    float: left;
    border: 1px solid red;
}

.in2 {
    float: left;
    height: 60px;
    line-height: 60px;
    width: 190px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1.1em;
    border: 1px solid …