Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/34.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 插入<;按钮>;到图层样式文本溢出的结尾:省略号_Html_Css - Fatal编程技术网

Html 插入<;按钮>;到图层样式文本溢出的结尾:省略号

Html 插入<;按钮>;到图层样式文本溢出的结尾:省略号,html,css,Html,Css,我正在尝试将[read more]按钮添加到多行省略号层 <p class="description">this is long text.this is long text. <button type="button">expand</button></p> .description { width: 300px; text-overflow: ellipsis; display: -webkit-box; overflow:

我正在尝试将[read more]按钮添加到多行省略号层

<p class="description">this is long text.this is long text. <button type="button">expand</button></p>

.description {
  width: 300px;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.description button {
  margin: 0; padding: 0 0 0 10px;
  background-color: transparent; border-width: 0; outline-width: 0;
  font-size: 14px; color: #3f8f7b;
}

是否可能?

按钮需要位于最后一行的右边距,或者可以位于文本块下方?如果是,请将其置于文本元素之外
但是

如果需要位于右下角,可以将文本内容设置为位置:相对,将按钮设置为位置:绝对/右:0/底部:0,但这样按钮将重叠框末端的字符

按钮需要位于最后一行的右边距,或者可以位于文本块下方?如果是,请将其置于文本元素之外
但是
如果需要位于右下角,可以将文本内容设置为位置:相对,将按钮设置为位置:绝对/右:0/底部:0,但这样按钮将重叠框末端的字符

试试这个:

.wrapper{
位置:相对位置;
显示:内联块;
宽度:360px;
}
.说明{
宽度:300px;
文本溢出:省略号;
显示:-网络工具包盒;
溢出:隐藏;
-webkit线夹:3个;
-网络工具包盒方向:垂直;
}
.btn{
边距:0;填充:0 10px;
背景色:透明;边框宽度:0;轮廓宽度:0;
字体大小:14px;颜色:3f8f7b;
位置:绝对位置;
底部:15px;
右:0;
光标:指针;
}

这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本text.this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本text.this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本text.这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本

扩大
试试这个:

.wrapper{
位置:相对位置;
显示:内联块;
宽度:360px;
}
.说明{
宽度:300px;
文本溢出:省略号;
显示:-网络工具包盒;
溢出:隐藏;
-webkit线夹:3个;
-网络工具包盒方向:垂直;
}
.btn{
边距:0;填充:0 10px;
背景色:透明;边框宽度:0;轮廓宽度:0;
字体大小:14px;颜色:3f8f7b;
位置:绝对位置;
底部:15px;
右:0;
光标:指针;
}

这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本text.this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本text.this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本。this是长文本text.这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本。这是长文本

扩大
我刚刚找到javascript库,用于在省略号(…)后添加更多按钮


它支持添加按钮的选项jQuery.dotdot({'after':'.classname'})。

我刚刚找到了在省略号(…)之后添加更多按钮的javascript库


它支持添加按钮的选项jQuery.dotdotdot({'after':'.classname'})。

Marcelo F.-按钮应位于框内,且不与字符重叠。Marcelo F.-按钮应位于框内,且不与字符重叠。
this is long text.this is long text.this is long text.this is long text.
this is long text.this is long text.this is long text.this is long text.
this is long text.this is long text.this is long text...   [more button]