标签: ellipsis

我有一个小问题。我找到了一种使用跨浏览器多行省略号的方法。

这是我的 less CSS mixin。

正如您所看到的，这个版本在webkit中运行完美，在所有其他浏览器中运行“ok”。

.ellipsis-multi(@lh, @l, @mw) {
  /* non-webkit */
  max-height: @lh*@l;
  /* webkit */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @l;
  display: -webkit-box;
  line-height: @lh;
  max-width: @mw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.excerpt {      
  &.hide {
    .ellipsis-multi(1.4em, 3, 100%)
  }
}

我的问题是，我使用阅读更多链接来添加和删除“隐藏”类。这很完美，但如果摘录 div 只有 2 行文本，链接也可见。

如果需要省略号，我需要一种仅显示链接的方法。

这是一个 Codepen 示例 http://codepen.io/janwagner/pen/ubHef

我更喜欢仅 CSS 的方法来解决这个问题:)

我想在我的文本中给出...的效果，并且我正在使用 angularjs。

我们可以使用 text-overflow: ellipsis; 用 ng-repeat 给出 tex... 效果？

我尝试过它对我不起作用。请建议！

代码

<span style="white-space: nowrap; max-width: 2em; text-overflow: ellipsis; -o-text-overflow: ellipsis;" ng-repeat="data in g.k()">
    {{data.name}}
</span>

如何使用 MaxLines 而不是 SingleLine 来制作选取框？

这是我的 TextView ：

<TextView
    android:text="bla bla bla bla bla bla"
    android:id="@+id/MarqueeText" 
    android:layout_width="30dp"
    android:layout_height="wrap_content" 
    android:singleLine="true"
    android:ellipsize="marquee" 
    android:marqueeRepeatLimit="marquee_forever"
    android:scrollHorizontally="true" 
    android:focusable="true" 
    android:focusableInTouchMode="true" 
    android:freezesText="true">

在我的 code.java 之后setSelected我TextView：

TextView txtView=(TextView) findViewById(R.id.MarqueeText);
txtView.setSelected(true);

问题是android:singleLine已被弃用，所以我必须使用android:maxLines它，但选框不适用于它。

我有一个具有固定宽度和内部文本的容器。我希望文本能够word-break: break-word到第二行，然后text-overflow: ellipsis如果文本仍然太长，则添加到第二行。这有可能实现吗？

例如，badgerbadgerbadgerbadgerbadger将分成两行，在第二行（因为它仍然太长）末尾有省略号。

const container = {
    maxWidth: '140px',
}

const textStyle = {
    display: 'block',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    maxWidth: '140px',
    textOverflow: 'ellipsis',
    wordBreak: 'break-word', //doesn't work
}

render() {
    return (
        <div style={container}>
            <p style={textStyle}>badgerbadgerbadgerbadgerbadger</p>
        </div>
    )
}

我想调用一个使用...（省略号）参数来支持未定义数量的参数的 R 函数：

f <- function(x, ...) {
  dot.args <- list(...)
  paste(names(dot.args), dot.args, sep = "=", collapse = ", ")
}

我可以调用此函数传递设计时预定义的实际参数，例如：

> f(1, a = 1, b = 2)
[1] "a=1, b=2"

如何传递我...只在运行时知道的实际参数（例如来自用户的输入）？

# let's assume the user input was "a = 1" and "b = 2"
# ------
# If the user input was converted into a vector:
> f(1, c(a = 1, b = 2))
[1] "=c(1, 2)"                # wrong result!
# If …

为什么text-overflow: ellipsisFirefox 中的水平对齐方式与 Chrome 和 Safari 中的不同？

以下是一些显示我所指内容的图像：

我希望它如何显示（Firefox）：

text-overflow: ellipsistext-align: center在 Firefox 中应用：

我不希望它显示的方式（Chrome/Safari）：

text-overflow: ellipsistext-align: center在 Chrome/Safari 中应用：

似乎在 Chrome 和 Safari 中，文本对齐应用于文本，忽略省略号；而在 Firefox 中，它会环绕所有文本，包括省略号。

以下是我在 CSS 中为上面显示的 div 元素编写的内容：

.textblock {
  text-align: center;
  font-weight: normal;
  display: block;
  position: absolute;
  width: 100%;
  line-height: 1em;
  padding: 1em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}

当我没有display: flex在.container减小容器大小时，文本会正确截断。

但是绿色块和文本不再彼此相邻，因为容器没有display: flex. 当我将其添加到容器中时，绿色块和文本正确对齐，但文本不再被截断（省略号丢失）。

如何使用 Flex 确保块和文本对齐，而且文本在动态宽度容器中被省略号截断？

我的示例代码笔

body {
  padding: 20px;
}

.container {
  display: flex;
}

.block {
  width: 25px;
  height: 25px;
  padding: 10px;
  background-color: yellowgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px
}

.text {
  display: flex;
}

.truncate {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20pt;
}

<div class="container">
  <div class="block">B</div>
  <div class="text">
    <div class="truncate">
      3. This is a long string that is …

<Text style={styles.TextStyle}> 
  This is the Sample Ellipsis Text for Ellipsis from Start.This is the Sample Ellipsis Text for Ellipsis from Start.This is the Sample Ellipsis Text for Ellipsis from Start.
</Text>

如果内容超出我需要显示的范围，我想使用点

我正在使用 Flexbox 开发 Bootstrap 卡，但无法进行文本截断。卡片文本按预期换行，但是，当空间不足时，卡片标题不会截断，而是将内容推送到卡片外（请参见屏幕截图）。

谁能解释为什么会发生这种情况？

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="card d-flex flex-row">
        <a href="#">[Image]</a>
        <div class="card-body d-flex align-items-center">
          <div class="flex-grow-1">
            <a href="#"><h5 class="card-title text-truncate">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h5></a>
            <div class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
          </div>
          <small class="align-self-baseline text-nowrap">Lorem ipsum</small>
          <div>[Icon]</div>
        </div>
      </div>
    </div>
  </div>
</div>

请参阅 jsfiddle 上的示例

当我在函数定义中使用可选参数时,我的省略号有问题.为了澄清,我定义了以下功能:

func1 <- function (x) (x-2)^2

func3 <- function (fun, arg.curve.user){
  arg.curve.user$expr <-  substitute(func1)
  arg.curve.default <- list(col = "blue", n = 1000, main = "This is a test")
  arg.curve <- modifyList (arg.curve.default, arg.curve.user)
  do.call("curve", arg.curve)
}

# optimizes func1 and call func2 to plot func1
func2 <- function (lb, ub, n.restarts = 5, n.sim = 10, ...){
  arg.curve.user <- as.list(substitute(list(...)))
  output <- gosolnp(fun = func1, LB = lb, UB = ub,  n.restarts =  n.restarts, 
  n.sim =  n.sim)$par
  func3(fun = func1, …